mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
Refresh Open Design app visuals
This commit is contained in:
“wangchenglong”
parent
899c9fe4d8
commit
69d3bf4f71
25 changed files with 364 additions and 165 deletions
|
|
@ -1,9 +1,10 @@
|
|||
import { createHmac, randomBytes } from "node:crypto";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { appendFile, mkdir, realpath, stat, writeFile } from "node:fs/promises";
|
||||
import { dirname, isAbsolute, join, resolve } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
import { BrowserWindow, dialog, ipcMain, screen, shell } from "electron";
|
||||
import { BrowserWindow, app, dialog, ipcMain, nativeImage, screen, shell } from "electron";
|
||||
import {
|
||||
DESKTOP_UPDATE_CHANNELS,
|
||||
DESKTOP_UPDATE_MODES,
|
||||
|
|
@ -540,6 +541,7 @@ const MAC_WINDOW_CHROME_CSS = `
|
|||
`;
|
||||
|
||||
function createPendingHtml(): string {
|
||||
const logoDataUrl = getDesktopIconDataUrl();
|
||||
return `data:text/html;charset=utf-8,${encodeURIComponent(`<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
|
@ -556,16 +558,25 @@ function createPendingHtml(): string {
|
|||
margin: 0;
|
||||
}
|
||||
main {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
img {
|
||||
border-radius: 34%;
|
||||
display: block;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
width: 72px;
|
||||
}
|
||||
h1 { margin: 18px 0 0; }
|
||||
p { color: #aeb7d5; margin: 12px 0 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
${logoDataUrl ? `<img src="${logoDataUrl}" alt="" />` : ""}
|
||||
<h1>Open Design</h1>
|
||||
<p>Waiting for the web runtime URL…</p>
|
||||
</main>
|
||||
|
|
@ -573,6 +584,25 @@ function createPendingHtml(): string {
|
|||
</html>`)}`;
|
||||
}
|
||||
|
||||
function resolveDesktopIconPath(): string {
|
||||
return resolve(dirname(fileURLToPath(import.meta.url)), "../../../web/public/app-icon.png");
|
||||
}
|
||||
|
||||
function applyDockIcon(): void {
|
||||
if (process.platform !== "darwin" || !app.dock) return;
|
||||
const icon = nativeImage.createFromPath(resolveDesktopIconPath());
|
||||
if (icon.isEmpty()) return;
|
||||
app.dock.setIcon(icon);
|
||||
}
|
||||
|
||||
function getDesktopIconDataUrl(): string | null {
|
||||
try {
|
||||
return `data:image/png;base64,${readFileSync(resolveDesktopIconPath()).toString("base64")}`;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeScreenshotPath(filePath: string): string {
|
||||
return isAbsolute(filePath) ? filePath : resolve(process.cwd(), filePath);
|
||||
}
|
||||
|
|
@ -849,6 +879,7 @@ function checkOptionsFromHost(options: unknown): { autoDownload?: boolean } | un
|
|||
|
||||
export async function createDesktopRuntime(options: DesktopRuntimeOptions): Promise<DesktopRuntime> {
|
||||
const preloadPath = options.preloadPath ?? join(dirname(fileURLToPath(import.meta.url)), "preload.cjs");
|
||||
applyDockIcon();
|
||||
|
||||
// ipcMain.handle() registers a handler in an internal map that is *not*
|
||||
// surfaced via eventNames(); the previous `!eventNames().includes(...)`
|
||||
|
|
@ -984,6 +1015,7 @@ export async function createDesktopRuntime(options: DesktopRuntimeOptions): Prom
|
|||
const petWindow = createDesktopPetWindow(preloadPath);
|
||||
const window = new BrowserWindow({
|
||||
height: 900,
|
||||
icon: resolveDesktopIconPath(),
|
||||
// Below this size the project page's left/right split (chat
|
||||
// composer + designs panel + preview pane) overlaps and the top
|
||||
// navigation clips, so prevent Electron from honoring user drags
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 916 B |
BIN
apps/landing-page/public/logo.png
Normal file
BIN
apps/landing-page/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -8,11 +8,8 @@ import '../src/styles/home/index.css';
|
|||
export const metadata: Metadata = {
|
||||
title: 'Open Design',
|
||||
icons: {
|
||||
icon: '/app-icon.svg',
|
||||
// Safari pinned-tab mask icon — Next.js's Metadata API doesn't have a
|
||||
// dedicated `mask` field, so we surface it via the generic `other`
|
||||
// bucket which renders as a raw <link rel="mask-icon" ...>.
|
||||
other: [{ rel: 'mask-icon', url: '/app-icon.svg', color: '#363636' }],
|
||||
icon: '/app-icon.png',
|
||||
apple: '/app-icon.png',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
BIN
apps/web/public/app-icon.png
Normal file
BIN
apps/web/public/app-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
|
|
@ -1,51 +1,6 @@
|
|||
<svg width="533" height="533" viewBox="0 0 533 533" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_107_105)">
|
||||
<mask id="mask0_107_105" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="534" height="534">
|
||||
<path d="M533.006 266.503C533.006 119.317 413.688 0 266.503 0C119.318 0 0.00012207 119.317 0.00012207 266.503V494.417C0.00012207 515.729 17.2769 533.006 38.5888 533.006H266.503C413.688 533.006 533.006 413.688 533.006 266.503Z" fill="url(#paint0_linear_107_105)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_107_105)">
|
||||
<g filter="url(#filter0_f_107_105)">
|
||||
<path d="M559.006 0H-32.4998V541.379C-32.4998 565.474 -12.9674 585.006 11.127 585.006H559.006V0Z" fill="url(#paint1_linear_107_105)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_f_107_105)">
|
||||
<path d="M241.706 161C241.706 122.422 210.431 91.1475 171.853 91.1475V91.1475C133.274 91.1475 102 122.422 102 161V161C102 199.579 133.274 230.853 171.853 230.853V230.853C210.431 230.853 241.706 199.579 241.706 161V161Z" fill="white" style="fill:white;fill-opacity:1;"/>
|
||||
</g>
|
||||
<g opacity="0.7" filter="url(#filter2_f_107_105)">
|
||||
<path d="M422.555 282.955C436.091 264.202 429.408 237.772 408.585 227.707C403.597 225.296 398.134 224.03 392.595 224.001L368.715 223.877C293.049 223.481 230.694 283.146 227.754 358.755L227.439 366.845C226.585 388.814 237.909 409.466 256.893 420.556C283.361 436.02 317.245 428.853 335.186 403.997L422.555 282.955Z" fill="white" style="fill:white;fill-opacity:1;"/>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M266.503 13C406.509 13.0001 520.005 126.497 520.005 266.503C520.005 406.508 406.509 520.006 266.503 520.006C126.498 520.006 13.0005 406.508 13.0005 266.503C13.0005 126.497 126.498 13 266.503 13ZM200.144 144.795C169.919 135.316 141.442 164.107 151.526 194.357L213.957 381.65C226.127 418.163 278.22 416.846 288.531 379.766L309.793 303.293L386.266 282.03C423.346 271.72 424.663 219.628 388.151 207.457L200.858 145.025L200.144 144.795ZM176.192 186.136C172.804 175.973 182.473 166.304 192.636 169.691L379.929 232.123L380.491 232.322C392.083 236.719 391.467 253.597 379.3 256.98L298.397 279.477C292.366 281.153 287.654 285.866 285.977 291.896L263.481 372.8C260.044 385.16 242.68 385.599 238.623 373.429L176.192 186.136Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2121 0.2121 0.2121);fill-opacity:1;"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_107_105" x="-143.001" y="-110.501" width="812.509" height="806.008" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="55.2506" result="effect1_foregroundBlur_107_105"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_107_105" x="34.3993" y="23.5468" width="274.907" height="274.907" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="33.8004" result="effect1_foregroundBlur_107_105"/>
|
||||
</filter>
|
||||
<filter id="filter2_f_107_105" x="159.793" y="156.274" width="337.406" height="340.017" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="33.8004" result="effect1_foregroundBlur_107_105"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_107_105" x1="13.0004" y1="260.003" x2="295.753" y2="533.006" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D999F7" style="stop-color:#D999F7;stop-color:color(display-p3 0.8510 0.6000 0.9686);stop-opacity:1;"/>
|
||||
<stop offset="0.336538" stop-color="#00A365" style="stop-color:#00A365;stop-color:color(display-p3 0.0000 0.6399 0.3972);stop-opacity:1;"/>
|
||||
<stop offset="0.673077" stop-color="#F8672F" style="stop-color:#F8672F;stop-color:color(display-p3 0.9725 0.4039 0.1843);stop-opacity:1;"/>
|
||||
<stop offset="1" stop-color="#9C9C9C" style="stop-color:#9C9C9C;stop-color:color(display-p3 0.6121 0.6121 0.6121);stop-opacity:1;"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_107_105" x1="6.50056" y1="533.006" x2="428.077" y2="4.44429" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#EEFF00" style="stop-color:#EEFF00;stop-color:color(display-p3 0.9333 1.0000 0.0000);stop-opacity:1;"/>
|
||||
<stop offset="0.307692" stop-color="#00FFAE" style="stop-color:#00FFAE;stop-color:color(display-p3 0.0000 1.0000 0.6833);stop-opacity:1;"/>
|
||||
<stop offset="0.668269" stop-color="#00EAFF" style="stop-color:#00EAFF;stop-color:color(display-p3 0.0000 0.9167 1.0000);stop-opacity:1;"/>
|
||||
<stop offset="1" stop-color="#00FF6A" style="stop-color:#00FF6A;stop-color:color(display-p3 0.0000 1.0000 0.4167);stop-opacity:1;"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_107_105">
|
||||
<rect width="533" height="533" fill="white" style="fill:white;fill-opacity:1;"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<svg width="444" height="444" viewBox="0 0 444 444" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="444" height="444" fill="#202020"/>
|
||||
<path d="M212.059 291.897L166.327 171.549C164.847 167.654 168.651 163.836 172.52 165.333L292.925 211.915C297.88 213.832 296.514 221.229 291.205 221.229H221.322V290.177C221.322 295.523 213.957 296.891 212.059 291.897Z" fill="#FFFFFF"/>
|
||||
<path d="M72 222C72 304.843 139.157 372 222 372H82C76.4772 372 72 367.523 72 362V222Z" fill="#FFFFFF"/>
|
||||
<path d="M222 87C296.558 87 357 147.442 357 222C357 296.558 296.558 357 222 357C147.442 357 87 296.558 87 222C87 147.442 147.442 87 222 87Z" stroke="#FFFFFF" stroke-width="30"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 672 B |
5
apps/web/public/brand-icon.svg
Normal file
5
apps/web/public/brand-icon.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="444" height="444" viewBox="0 0 444 444" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M212.059 291.897L166.327 171.549C164.847 167.654 168.651 163.836 172.52 165.333L292.925 211.915C297.88 213.832 296.514 221.229 291.205 221.229H221.322V290.177C221.322 295.523 213.957 296.891 212.059 291.897Z" fill="currentColor"/>
|
||||
<path d="M72 222C72 304.843 139.157 372 222 372H82C76.4772 372 72 367.523 72 362V222Z" fill="currentColor"/>
|
||||
<path d="M222 87C296.558 87 357 147.442 357 222C357 296.558 296.558 357 222 357C147.442 357 87 296.558 87 222C87 147.442 147.442 87 222 87Z" stroke="currentColor" stroke-width="30"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
BIN
apps/web/public/logo.png
Normal file
BIN
apps/web/public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -1,15 +1,6 @@
|
|||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' role='img' aria-label='Open Design'>
|
||||
<title>Open Design</title>
|
||||
<g stroke='#1F1B16' stroke-width='3.4' stroke-linecap='square' fill='none'>
|
||||
<path d='M10 24 L10 10 L24 10' />
|
||||
<path d='M40 10 L54 10 L54 24' />
|
||||
<path d='M54 40 L54 54 L40 54' />
|
||||
<path d='M24 54 L10 54 L10 40' />
|
||||
</g>
|
||||
<g stroke='#C2532D' stroke-width='3' stroke-linecap='round'>
|
||||
<line x1='32' y1='20' x2='32' y2='44' />
|
||||
<line x1='20' y1='32' x2='44' y2='32' />
|
||||
<line x1='23.51' y1='23.51' x2='40.49' y2='40.49' />
|
||||
<line x1='40.49' y1='23.51' x2='23.51' y2='40.49' />
|
||||
</g>
|
||||
<svg width="444" height="444" viewBox="0 0 444 444" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="444" height="444" fill="#202020"/>
|
||||
<path d="M212.059 291.897L166.327 171.549C164.847 167.654 168.651 163.836 172.52 165.333L292.925 211.915C297.88 213.832 296.514 221.229 291.205 221.229H221.322V290.177C221.322 295.523 213.957 296.891 212.059 291.897Z" fill="#FFFFFF"/>
|
||||
<path d="M72 222C72 304.843 139.157 372 222 372H82C76.4772 372 72 367.523 72 362V222Z" fill="#FFFFFF"/>
|
||||
<path d="M222 87C296.558 87 357 147.442 357 222C357 296.558 296.558 357 222 357C147.442 357 87 296.558 87 222C87 147.442 147.442 87 222 87Z" stroke="#FFFFFF" stroke-width="30"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 656 B After Width: | Height: | Size: 672 B |
|
|
@ -70,7 +70,7 @@ export function EntryNavRail({ view, onViewChange, onNewProject }: Props) {
|
|||
data-testid="entry-nav-logo"
|
||||
>
|
||||
<img
|
||||
src="/app-icon.svg"
|
||||
src="/app-icon.svg?v=rail-clean"
|
||||
alt=""
|
||||
className="entry-nav-rail__logo-img"
|
||||
draggable={false}
|
||||
|
|
@ -82,7 +82,7 @@ export function EntryNavRail({ view, onViewChange, onNewProject }: Props) {
|
|||
onClick={onNewProject}
|
||||
testId="entry-nav-new-project"
|
||||
>
|
||||
<Icon name="plus" size={18} />
|
||||
<Icon name="plus-filled" size={18} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
active={view === 'home'}
|
||||
|
|
@ -100,7 +100,7 @@ export function EntryNavRail({ view, onViewChange, onNewProject }: Props) {
|
|||
onClick={() => onViewChange('projects')}
|
||||
testId="entry-nav-projects"
|
||||
>
|
||||
<Icon name="folder" size={18} />
|
||||
<Icon name="folder-filled" size={18} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
active={view === 'tasks'}
|
||||
|
|
@ -109,7 +109,7 @@ export function EntryNavRail({ view, onViewChange, onNewProject }: Props) {
|
|||
onClick={() => onViewChange('tasks')}
|
||||
testId="entry-nav-tasks"
|
||||
>
|
||||
<Icon name="kanban" size={18} />
|
||||
<Icon name="layers-filled" size={18} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
active={view === 'plugins'}
|
||||
|
|
@ -127,7 +127,19 @@ export function EntryNavRail({ view, onViewChange, onNewProject }: Props) {
|
|||
onClick={() => onViewChange('design-systems')}
|
||||
testId="entry-nav-design-systems"
|
||||
>
|
||||
<Icon name="palette" size={18} />
|
||||
<Icon name="palette-filled" size={18} />
|
||||
</NavButton>
|
||||
</div>
|
||||
<div className="entry-nav-rail__footer">
|
||||
<div className="entry-nav-rail__divider" role="separator" />
|
||||
<NavButton
|
||||
active={view === 'plugins'}
|
||||
ariaLabel={t('entry.navPlugins')}
|
||||
tooltip={t('entry.navPlugins')}
|
||||
onClick={() => onViewChange('plugins')}
|
||||
testId="entry-nav-plugins"
|
||||
>
|
||||
<Icon name="puzzle" size={18} />
|
||||
</NavButton>
|
||||
<NavButton
|
||||
active={view === 'integrations'}
|
||||
|
|
@ -136,7 +148,7 @@ export function EntryNavRail({ view, onViewChange, onNewProject }: Props) {
|
|||
onClick={() => onViewChange('integrations')}
|
||||
testId="entry-nav-integrations"
|
||||
>
|
||||
<Icon name="link" size={18} />
|
||||
<Icon name="integrations-filled" size={18} />
|
||||
</NavButton>
|
||||
</div>
|
||||
<div className="entry-nav-rail__footer">
|
||||
|
|
|
|||
|
|
@ -842,6 +842,16 @@ export function EntryShell({
|
|||
<div className="entry-main__topbar">
|
||||
<div className="entry-main__topbar-chips">
|
||||
<GithubStarBadge />
|
||||
<a
|
||||
className="entry-discord-badge"
|
||||
href="https://discord.gg/mHAjSMV6gz"
|
||||
aria-label="Join the Open Design Discord"
|
||||
title="Join the Open Design Discord"
|
||||
data-testid="entry-discord-badge"
|
||||
>
|
||||
<Icon name="discord" size={16} className="entry-discord-badge__icon" />
|
||||
<span className="entry-discord-badge__label">Join Discord</span>
|
||||
</a>
|
||||
<InlineModelSwitcher
|
||||
config={config}
|
||||
agents={agents}
|
||||
|
|
@ -869,7 +879,7 @@ export function EntryShell({
|
|||
data-testid="entry-use-everywhere-button"
|
||||
>
|
||||
<span className="use-everywhere-chip__icon" aria-hidden>
|
||||
<Icon name="hammer" size={13} />
|
||||
<Icon name="hammer" size={16} />
|
||||
</span>
|
||||
<span className="use-everywhere-chip__label">
|
||||
{t('entry.useEverywhereTitle')}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function GithubStarBadge() {
|
|||
title={t('entry.githubStarTitle')}
|
||||
data-testid="entry-star-badge"
|
||||
>
|
||||
<Icon name="github" size={13} className="entry-star-badge__icon" />
|
||||
<Icon name="github-filled" size={16} className="entry-star-badge__icon" />
|
||||
<span className="entry-star-badge__label">{t('entry.githubStarLabel')}</span>
|
||||
<span className="entry-star-badge__sep" aria-hidden>
|
||||
·
|
||||
|
|
|
|||
|
|
@ -96,6 +96,31 @@ interface HomeMentionSection {
|
|||
options: HomeMentionOption[];
|
||||
}
|
||||
|
||||
function HeroBrandIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 444 444"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M212.059 291.897L166.327 171.549C164.847 167.654 168.651 163.836 172.52 165.333L292.925 211.915C297.88 213.832 296.514 221.229 291.205 221.229H221.322V290.177C221.322 295.523 213.957 296.891 212.059 291.897Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M72 222C72 304.843 139.157 372 222 372H82C76.4772 372 72 367.523 72 362V222Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M222 87C296.558 87 357 147.442 357 222C357 296.558 296.558 357 222 357C147.442 357 87 296.558 87 222C87 147.442 147.442 87 222 87Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="30"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export const HomeHero = forwardRef<HTMLTextAreaElement, Props>(function HomeHero(
|
||||
{
|
||||
prompt,
|
||||
|
|
@ -413,7 +438,7 @@ export const HomeHero = forwardRef<HTMLTextAreaElement, Props>(function HomeHero
|
|||
<section className="home-hero" data-testid="home-hero">
|
||||
<div className="home-hero__brand" aria-hidden>
|
||||
<span className="home-hero__brand-mark">
|
||||
<img src="/app-icon.svg" alt="" draggable={false} />
|
||||
<HeroBrandIcon />
|
||||
</span>
|
||||
<span className="home-hero__brand-name">Open Design</span>
|
||||
</div>
|
||||
|
|
@ -814,7 +839,7 @@ export const HomeHero = forwardRef<HTMLTextAreaElement, Props>(function HomeHero
|
|||
title={t('chat.attachAria')}
|
||||
aria-label={t('chat.attachAria')}
|
||||
>
|
||||
<Icon name="attach" size={14} />
|
||||
<Icon name="attach" size={20} />
|
||||
</button>
|
||||
<span className="home-hero__hint">
|
||||
<kbd>↵</kbd> {t('homeHero.toRun')} · <kbd>Shift</kbd>+<kbd>↵</kbd> {t('homeHero.forNewLine')}
|
||||
|
|
@ -829,7 +854,17 @@ export const HomeHero = forwardRef<HTMLTextAreaElement, Props>(function HomeHero
|
|||
title={canSubmit ? t('homeHero.run') : t('homeHero.typeSomethingToRun')}
|
||||
aria-label={t('homeHero.run')}
|
||||
>
|
||||
<Icon name="arrow-up" size={18} />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,25 +22,33 @@ export type IconName =
|
|||
| 'file'
|
||||
| 'file-code'
|
||||
| 'folder'
|
||||
| 'folder-filled'
|
||||
| 'github'
|
||||
| 'github-filled'
|
||||
| 'grid'
|
||||
| 'hammer'
|
||||
| 'help-circle'
|
||||
| 'history'
|
||||
| 'home'
|
||||
| 'home-filled'
|
||||
| 'image'
|
||||
| 'import'
|
||||
| 'info'
|
||||
| 'kanban'
|
||||
| 'layers-filled'
|
||||
| 'languages'
|
||||
| 'link'
|
||||
| 'integrations-filled'
|
||||
| 'mic'
|
||||
| 'minus'
|
||||
| 'more-horizontal'
|
||||
| 'orbit'
|
||||
| 'palette'
|
||||
| 'palette-filled'
|
||||
| 'pencil'
|
||||
| 'plus'
|
||||
| 'plus-filled'
|
||||
| 'puzzle'
|
||||
| 'star'
|
||||
| 'play'
|
||||
| 'present'
|
||||
|
|
@ -172,7 +180,7 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
case 'discord':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09a.07.07 0 0 0-.07-.03c-1.5.26-2.93.71-4.27 1.33a.06.06 0 0 0-.03.03C2.31 9.39 1.84 13.34 2.07 17.24c0 .03.02.05.04.06a16.18 16.18 0 0 0 4.85 2.43.08.08 0 0 0 .07-.03c.37-.51.7-1.05.99-1.62a.08.08 0 0 0-.04-.11c-.53-.2-1.03-.45-1.51-.73a.08.08 0 0 1-.01-.13c.1-.08.21-.16.3-.24a.08.08 0 0 1 .08-.01c3.21 1.46 6.69 1.46 9.86 0a.08.08 0 0 1 .08.01c.1.08.2.16.3.24a.08.08 0 0 1-.01.13c-.48.28-.98.53-1.51.73a.08.08 0 0 0-.04.11c.3.57.62 1.11 1 1.62a.08.08 0 0 0 .07.03 16.13 16.13 0 0 0 4.86-2.43.07.07 0 0 0 .04-.06c.27-4.5-.45-8.42-2.83-11.88a.06.06 0 0 0-.03-.03zM8.52 14.91c-.95 0-1.74-.87-1.74-1.94s.77-1.94 1.74-1.94c.97 0 1.76.88 1.74 1.94 0 1.07-.78 1.94-1.74 1.94zm6.42 0c-.95 0-1.74-.87-1.74-1.94s.77-1.94 1.74-1.94c.98 0 1.76.88 1.74 1.94 0 1.07-.77 1.94-1.74 1.94z" />
|
||||
<path d="M8.52062 13.8458C7.48059 13.8458 6.63159 12.9014 6.63159 11.7446 6.63159 10.5879 7.45936 9.64331 8.52062 9.64331 9.57123 9.64331 10.4308 10.5879 10.4096 11.7446 10.4096 12.9014 9.57123 13.8458 8.52062 13.8458ZM15.4941 13.8458C14.454 13.8458 13.604 12.9014 13.604 11.7446 13.604 10.5879 14.4328 9.64331 15.4941 9.64331 16.5447 9.64331 17.4043 10.5879 17.3831 11.7446 17.3831 12.9014 16.5553 13.8458 15.4941 13.8458ZM10.1253 4.32296 9.81655 3.76001 9.18323 3.86556C7.71915 4.10958 6.32658 4.54677 5.02544 5.14604L4.79651 5.25148 4.65507 5.46009C2.0418 9.31441 1.3258 13.1087 1.68032 16.8362L1.71897 17.2425 2.04912 17.4824C3.78851 18.7465 5.47417 19.5189 7.12727 20.0257L7.91657 20.2676 9.03013 17.5506C10.9397 18.0226 13.0592 18.0228 14.969 17.5511L16.0757 20.2683 16.8668 20.0256C18.5173 19.5193 20.2137 18.7472 21.9466 17.4811L22.2726 17.243 22.3131 16.8414C22.7491 12.5213 21.616 8.75773 19.3547 5.45652L19.2128 5.24944 18.9846 5.14504C17.6767 4.54685 16.2852 4.10981 14.8309 3.86573L14.2132 3.76207 13.8987 4.30369C13.8112 4.45445 13.7215 4.62464 13.6364 4.79687 12.5441 4.6847 11.456 4.68446 10.3726 4.79652 10.2882 4.62736 10.2025 4.4638 10.1253 4.32296ZM6.71436 16.6102C6.91235 16.7243 7.11973 16.8358 7.32557 16.9381L6.8764 18.034C5.75585 17.6259 4.61837 17.0637 3.4476 16.2557 3.22313 13.1178 3.86092 9.951 6.01196 6.68626 6.90962 6.29123 7.8535 5.98279 8.83606 5.77295 8.89631 5.89831 8.95235 6.02066 8.99839 6.12917L9.27128 6.77238 9.96259 6.67098C11.3152 6.4726 12.6772 6.47234 14.0523 6.67124L14.7424 6.77106 15.0147 6.12917C15.0621 6.01743 15.1167 5.89547 15.1743 5.77322 16.1525 5.98326 17.098 6.29212 18.0029 6.68812 19.8781 9.50857 20.8241 12.6544 20.5486 16.2552 19.3837 17.0625 18.2422 17.6249 17.1193 18.0335L16.6735 16.939C16.8799 16.8365 17.0879 16.7246 17.2865 16.6102 17.7763 16.328 18.3039 15.976 18.6402 15.6397L17.3606 14.3602C17.1969 14.5239 16.837 14.7808 16.3831 15.0423 15.9388 15.2983 15.498 15.5052 15.2164 15.5983 13.2126 16.2608 10.7883 16.2608 8.78443 15.5983 8.50285 15.5052 8.06205 15.2983 7.61772 15.0423 7.16383 14.7808 6.80392 14.5239 6.64017 14.3602L5.36065 15.6397C5.6969 15.976 6.2245 16.328 6.71436 16.6102Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'download':
|
||||
|
|
@ -243,6 +251,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
|
||||
</svg>
|
||||
);
|
||||
case 'folder-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M2 4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21L3 21C2.45 21 2 20.55 2 20V4ZM10.5858 6L9.58579 5H4V7H9.58579L10.5858 6ZM4 9V19L20 19V7H12.4142L10.4142 9H4Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'github':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
@ -250,6 +264,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||
</svg>
|
||||
);
|
||||
case 'github-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M5.88401 18.6533C5.58404 18.4526 5.32587 18.1975 5.0239 17.8369C4.91473 17.7065 4.47283 17.1524 4.55811 17.2583C4.09533 16.6833 3.80296 16.417 3.50156 16.3089C2.9817 16.1225 2.7114 15.5499 2.89784 15.0301C3.08428 14.5102 3.65685 14.2399 4.17672 14.4263C4.92936 14.6963 5.43847 15.1611 6.12425 16.0143C6.03025 15.8974 6.46364 16.441 6.55731 16.5529C6.74784 16.7804 6.88732 16.9182 6.99629 16.9911C7.20118 17.1283 7.58451 17.1874 8.14709 17.1311C8.17065 16.7489 8.24136 16.3783 8.34919 16.0358C5.38097 15.3104 3.70116 13.3952 3.70116 9.63971C3.70116 8.40085 4.0704 7.28393 4.75917 6.3478C4.5415 5.45392 4.57433 4.37284 5.06092 3.15636C5.1725 2.87739 5.40361 2.66338 5.69031 2.57352C5.77242 2.54973 5.81791 2.53915 5.89878 2.52673C6.70167 2.40343 7.83573 2.69705 9.31449 3.62336C10.181 3.41879 11.0885 3.315 12.0012 3.315C12.9129 3.315 13.8196 3.4186 14.6854 3.62277C16.1619 2.69 17.2986 2.39649 18.1072 2.52651C18.1919 2.54013 18.2645 2.55783 18.3249 2.57766C18.6059 2.66991 18.8316 2.88179 18.9414 3.15636C19.4279 4.37256 19.4608 5.45344 19.2433 6.3472C19.9342 7.28337 20.3012 8.39208 20.3012 9.63971C20.3012 13.3968 18.627 15.3048 15.6588 16.032C15.7837 16.447 15.8496 16.9105 15.8496 17.4121C15.8496 18.0765 15.8471 18.711 15.8424 19.4225C15.8412 19.6127 15.8397 19.8159 15.8375 20.1281C16.2129 20.2109 16.5229 20.5077 16.6031 20.9089C16.7114 21.4504 16.3602 21.9773 15.8186 22.0856C14.6794 22.3134 13.8353 21.5538 13.8353 20.5611C13.8353 20.4708 13.836 20.3417 13.8375 20.1145C13.8398 19.8015 13.8412 19.599 13.8425 19.4094C13.8471 18.7019 13.8496 18.0716 13.8496 17.4121C13.8496 16.7148 13.6664 16.2602 13.4237 16.051C12.7627 15.4812 13.0977 14.3973 13.965 14.2999C16.9314 13.9666 18.3012 12.8177 18.3012 9.63971C18.3012 8.68508 17.9893 7.89571 17.3881 7.23559C17.1301 6.95233 17.0567 6.54659 17.199 6.19087C17.3647 5.77663 17.4354 5.23384 17.2941 4.57702L17.2847 4.57968C16.7928 4.71886 16.1744 5.0198 15.4261 5.5285C15.182 5.69438 14.8772 5.74401 14.5932 5.66413C13.7729 5.43343 12.8913 5.315 12.0012 5.315C11.111 5.315 10.2294 5.43343 9.40916 5.66413C9.12662 5.74359 8.82344 5.69492 8.57997 5.53101C7.8274 5.02439 7.2056 4.72379 6.71079 4.58376C6.56735 5.23696 6.63814 5.77782 6.80336 6.19087C6.94565 6.54659 6.87219 6.95233 6.61423 7.23559C6.01715 7.8912 5.70116 8.69376 5.70116 9.63971C5.70116 12.8116 7.07225 13.9683 10.023 14.2999C10.8883 14.3971 11.2246 15.4769 10.5675 16.0482C10.3751 16.2156 10.1384 16.7802 10.1384 17.4121V20.5611C10.1384 21.5474 9.30356 22.2869 8.17878 22.09C7.63476 21.9948 7.27093 21.4766 7.36613 20.9326C7.43827 20.5204 7.75331 20.2116 8.13841 20.1276V19.1381C7.22829 19.1994 6.47656 19.0498 5.88401 18.6533Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'grid':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
@ -259,6 +279,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<rect x="14" y="14" width="7" height="7" rx="1" />
|
||||
</svg>
|
||||
);
|
||||
case 'puzzle':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H18C18.5523 5 19 5.44772 19 6V9C21.2091 9 23 10.7909 23 13C23 15.2091 21.2091 17 19 17V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H17V15.8293C17 15.5047 17.1576 15.2003 17.4226 15.0128C17.6877 14.8254 18.0272 14.7783 18.3332 14.8865C18.5405 14.9597 18.7645 15 19 15C20.1046 15 21 14.1046 21 13C21 11.8954 20.1046 11 19 11C18.7645 11 18.5405 11.0403 18.3332 11.1135C18.0272 11.2217 17.6877 11.1746 17.4226 10.9872C17.1576 10.7997 17 10.4953 17 10.1707V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'hammer':
|
||||
// Lucide-style hammer — a slanted head plus diagonal handle, used
|
||||
// to signal "tool / functionality" affordances. Pairs with the
|
||||
|
|
@ -293,6 +319,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z" />
|
||||
</svg>
|
||||
);
|
||||
case 'home-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19ZM8 15H16V17H8V15Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'image':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
@ -325,6 +357,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<rect x="17" y="4" width="4" height="13" rx="1" />
|
||||
</svg>
|
||||
);
|
||||
case 'layers-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M20.0833 15.1999L21.2854 15.9212C21.5221 16.0633 21.5989 16.3704 21.4569 16.6072C21.4146 16.6776 21.3557 16.7365 21.2854 16.7787L12.5144 22.0412C12.1977 22.2313 11.8021 22.2313 11.4854 22.0412L2.71451 16.7787C2.47772 16.6366 2.40093 16.3295 2.54301 16.0927C2.58523 16.0223 2.64413 15.9634 2.71451 15.9212L3.9166 15.1999L11.9999 20.0499L20.0833 15.1999ZM20.0833 10.4999L21.2854 11.2212C21.5221 11.3633 21.5989 11.6704 21.4569 11.9072C21.4146 11.9776 21.3557 12.0365 21.2854 12.0787L11.9999 17.6499L2.71451 12.0787C2.47772 11.9366 2.40093 11.6295 2.54301 11.3927C2.58523 11.3223 2.64413 11.2634 2.71451 11.2212L3.9166 10.4999L11.9999 15.3499L20.0833 10.4999ZM12.5144 1.30864L21.2854 6.5712C21.5221 6.71327 21.5989 7.0204 21.4569 7.25719C21.4146 7.32757 21.3557 7.38647 21.2854 7.42869L11.9999 12.9999L2.71451 7.42869C2.47772 7.28662 2.40093 6.97949 2.54301 6.7427C2.58523 6.67232 2.64413 6.61343 2.71451 6.5712L11.4854 1.30864C11.8021 1.11864 12.1977 1.11864 12.5144 1.30864ZM11.9999 3.33233L5.88723 6.99995L11.9999 10.6676L18.1126 6.99995L11.9999 3.33233Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'languages':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
@ -343,6 +381,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 1 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
);
|
||||
case 'integrations-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M6.00723 7.29726C6.00242 7.19876 5.99998 7.09965 5.99998 7C5.99998 3.68629 8.68627 1 12 1C13.3496 1 14.5977 1.44677 15.6006 2.20007L14.3994 3.7992C13.731 3.29712 12.9016 3 12 3C11.7239 3 11.4542 3.02798 11.1938 3.08127C9.37112 3.45426 8 5.06701 8 7C8 9.03308 9.51679 10.7119 11.4805 10.9666C12.5039 9.55847 14.055 8.70883 15.696 8.53306C16.3796 8.45983 17.0792 8.50382 17.7635 8.67248C18.3006 8.80481 18.828 9.01404 19.33 9.3039C22.1998 10.9608 23.183 14.6303 21.5262 17.5C19.8693 20.3698 16.1998 21.3531 13.33 19.6962C12.828 19.4064 12.3832 19.0543 12 18.6554C11.6169 19.0543 11.172 19.4064 10.6699 19.6963C7.80019 21.3531 4.13065 20.3699 2.47379 17.5001C0.81694 14.6304 1.80019 10.9608 4.66995 9.30397C5.17193 9.01416 5.69919 8.80494 6.23623 8.67261C6.11278 8.24646 6.03531 7.80079 6.00955 7.3413L6.00723 7.29726ZM7.14979 10.5328C6.64359 10.5989 6.14138 10.7638 5.66995 11.036C3.75678 12.1406 3.10128 14.587 4.20585 16.5001C5.31042 18.4133 7.75678 19.0688 9.66995 17.9642C10.3021 17.5993 10.7949 17.09 11.1337 16.5024C11.7429 15.4457 11.8532 14.1391 11.3649 12.9669C10.9807 12.9264 10.6072 12.8497 10.2481 12.7402C10.2028 12.7264 10.1577 12.712 10.1128 12.6972C8.91238 12.2997 7.87997 11.5335 7.14979 10.5328ZM13.1543 16.9343C13.4647 17.3396 13.8586 17.692 14.33 17.9642C16.2432 19.0687 18.6895 18.4132 19.7941 16.5C20.2936 15.635 20.4332 14.6609 20.2593 13.7511C20.0488 12.6488 19.3781 11.6409 18.33 11.0357C17.6978 10.6708 17.0104 10.4986 16.3322 10.499C15.1125 10.4998 13.9259 11.0576 13.1548 12.0666C13.2661 12.3165 13.3588 12.5707 13.4336 12.8277C13.4774 12.9785 13.5151 13.1302 13.5467 13.2825C13.5602 13.3478 13.5726 13.4131 13.5839 13.4786C13.7871 14.6567 13.6297 15.8611 13.1543 16.9343ZM18.5774 7C18.866 7.33402 19.106 7.71371 19.2866 8.12811L19.5331 8.69379C19.7136 9.10792 20.2864 9.10792 20.4668 8.69379L20.7134 8.12811C21.1529 7.11947 21.9445 6.31641 22.9323 5.87708L23.67 5.53922C24.0808 5.35653 24.0808 4.75881 23.67 4.57612L22.9748 4.25714C21.9616 3.80651 21.1558 2.97373 20.7238 1.93083L20.4706 1.31953C20.2942 0.893489 19.7058 0.893489 19.5293 1.31953L19.2761 1.93083C19.1965 2.12319 19.1041 2.3084 19 2.48538C18.5399 3.26793 17.8515 3.88963 17.0252 4.25714L16.308 4.57612C15.8973 4.75881 15.8973 5.35653 16.308 5.53922L17.0677 5.87708C17.6496 6.13591 18.1635 6.521 18.5774 7Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'mic':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
@ -393,6 +437,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<circle cx="17.5" cy="9" r="1" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
);
|
||||
case 'palette-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'pencil':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
@ -407,6 +457,12 @@ export function Icon({ name, size = 14, strokeWidth = 1.6, ...rest }: Props) {
|
|||
<path d="M5 12h14" />
|
||||
</svg>
|
||||
);
|
||||
case 'plus-filled':
|
||||
return (
|
||||
<svg {...common} fill="currentColor" stroke="none">
|
||||
<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" />
|
||||
</svg>
|
||||
);
|
||||
case 'play':
|
||||
return (
|
||||
<svg {...common}>
|
||||
|
|
|
|||
|
|
@ -444,7 +444,7 @@ export function WorkspaceTabsBar({ route, projects }: Props) {
|
|||
title={t('common.close')}
|
||||
onClick={() => closeTab(tab.id)}
|
||||
>
|
||||
<Icon name="close" size={11} />
|
||||
<Icon name="close" size={10} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@
|
|||
--accent-soft: #f5d8cb;
|
||||
--accent-tint: #fbeee5;
|
||||
--accent-hover: #b45a3b;
|
||||
--chat-warm-fill: #faf9f7;
|
||||
--chat-warm-fill-strong: #f4ece6;
|
||||
--chat-warm-border: #e4d8cf;
|
||||
|
||||
/* Semantic accent tints used by tool / status pills. */
|
||||
--green: #1f7a3a;
|
||||
|
|
@ -96,6 +99,9 @@
|
|||
--accent-soft: #3d2318;
|
||||
--accent-tint: #2e1a12;
|
||||
--accent-hover: #e8896a;
|
||||
--chat-warm-fill: #2a211d;
|
||||
--chat-warm-fill-strong: #3a261d;
|
||||
--chat-warm-border: #5a3729;
|
||||
|
||||
--green: #4caf72;
|
||||
--green-bg: #0f2a18;
|
||||
|
|
@ -143,6 +149,9 @@
|
|||
--accent-soft: #3d2318;
|
||||
--accent-tint: #2e1a12;
|
||||
--accent-hover: #e8896a;
|
||||
--chat-warm-fill: #2a211d;
|
||||
--chat-warm-fill-strong: #3a261d;
|
||||
--chat-warm-border: #5a3729;
|
||||
|
||||
--green: #4caf72;
|
||||
--green-bg: #0f2a18;
|
||||
|
|
@ -586,7 +595,7 @@ code {
|
|||
flex: 1 1 124px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 18px;
|
||||
grid-template-columns: minmax(0, 1fr) 24px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
|
|
@ -668,10 +677,10 @@ code {
|
|||
letter-spacing: 0;
|
||||
}
|
||||
.workspace-tab__close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 2px;
|
||||
padding: 4px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
|
|
@ -679,6 +688,7 @@ code {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
opacity: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
@ -13413,9 +13423,9 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
|
||||
/* Tool / operation cards — single, ungrouped */
|
||||
.op-card {
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-panel);
|
||||
background: var(--chat-warm-fill);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xs);
|
||||
min-width: 0;
|
||||
|
|
@ -13433,11 +13443,11 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-subtle);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-family: var(--mono);
|
||||
flex-shrink: 0;
|
||||
|
|
@ -13489,9 +13499,9 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
padding: 7px 11px;
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-panel);
|
||||
background: color-mix(in srgb, var(--chat-warm-fill) 78%, var(--bg-panel));
|
||||
color: var(--text);
|
||||
font-size: 12.5px;
|
||||
font-family: inherit;
|
||||
|
|
@ -13499,10 +13509,14 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
text-align: left;
|
||||
transition: border-color 120ms ease, background 120ms ease;
|
||||
}
|
||||
.op-ask-question-option:hover { border-color: var(--accent); }
|
||||
.op-ask-question-option:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
}
|
||||
.op-ask-question-option.on {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-bg, var(--bg-subtle));
|
||||
background: var(--chat-warm-fill-strong);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
.op-ask-question-option:disabled {
|
||||
cursor: default;
|
||||
|
|
@ -13551,13 +13565,13 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
* would wipe the selected state and the card would look unanswered.
|
||||
*/
|
||||
.op-ask-question-locked .op-ask-question-option:not(.on) {
|
||||
border-color: var(--border-soft);
|
||||
background: transparent;
|
||||
border-color: color-mix(in srgb, var(--chat-warm-border) 72%, transparent);
|
||||
background: color-mix(in srgb, var(--chat-warm-fill) 62%, transparent);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.op-ask-question-locked .op-ask-question-option.on {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-bg, var(--bg-subtle));
|
||||
background: var(--chat-warm-fill-strong);
|
||||
cursor: default;
|
||||
}
|
||||
.op-ask-question-locked .op-ask-question-option.on .op-ask-question-option-desc {
|
||||
|
|
@ -13631,8 +13645,8 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
.produced-files {
|
||||
margin-top: 4px;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--chat-warm-fill);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.produced-files-label {
|
||||
|
|
@ -13650,8 +13664,8 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--chat-warm-fill) 78%, var(--bg-panel));
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
font-size: 12px;
|
||||
}
|
||||
.produced-file-icon { width: 22px; text-align: center; color: var(--text-muted); }
|
||||
|
|
@ -15112,27 +15126,26 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
/* Question form — interactive form a planning agent can post into chat */
|
||||
.question-form {
|
||||
margin: 8px 0;
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--bg-panel);
|
||||
background: var(--chat-warm-fill);
|
||||
box-shadow: var(--shadow-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
.question-form-locked {
|
||||
background: var(--bg-subtle);
|
||||
background: var(--chat-warm-fill);
|
||||
box-shadow: none;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.question-form-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 100%);
|
||||
border-bottom: 1px solid var(--chat-warm-border);
|
||||
background: linear-gradient(180deg, var(--chat-warm-fill-strong) 0%, var(--chat-warm-fill) 100%);
|
||||
}
|
||||
.question-form-locked .question-form-head {
|
||||
background: var(--bg-subtle);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
}
|
||||
.question-form-icon {
|
||||
width: 28px;
|
||||
|
|
@ -15169,8 +15182,8 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
text-transform: uppercase;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--chat-warm-fill);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.question-form-body {
|
||||
|
|
@ -15207,9 +15220,9 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
border-radius: 999px;
|
||||
background: var(--bg-panel);
|
||||
background: color-mix(in srgb, var(--chat-warm-fill) 78%, var(--bg-panel));
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
|
||||
|
|
@ -15230,15 +15243,18 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
color: inherit;
|
||||
opacity: 0.72;
|
||||
}
|
||||
.qf-chip:hover { border-color: var(--border-strong); }
|
||||
.qf-chip:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
}
|
||||
.qf-chip-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
}
|
||||
.qf-chip-disabled:hover { border-color: var(--border); }
|
||||
.qf-chip-disabled:hover { border-color: var(--chat-warm-border); }
|
||||
.qf-chip-on {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
color: var(--accent-hover);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -15247,14 +15263,22 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
|
|||
.qf-select,
|
||||
.qf-textarea {
|
||||
font-size: 13px;
|
||||
background: color-mix(in srgb, var(--chat-warm-fill) 50%, var(--bg-panel));
|
||||
border-color: var(--chat-warm-border);
|
||||
}
|
||||
.qf-input:focus,
|
||||
.qf-select:focus,
|
||||
.qf-textarea:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
}
|
||||
.question-form-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-subtle);
|
||||
border-top: 1px solid var(--chat-warm-border);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
}
|
||||
.qf-hint,
|
||||
.qf-locked-note {
|
||||
|
|
@ -16417,8 +16441,8 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 10px;
|
||||
background: var(--bg-subtle);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--chat-warm-fill);
|
||||
border: 1px solid var(--chat-warm-border);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 11.5px;
|
||||
color: var(--text-muted);
|
||||
|
|
@ -16428,7 +16452,7 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
|
|||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-muted);
|
||||
background: var(--chat-warm-border);
|
||||
}
|
||||
.assistant-footer .dot[data-active="true"] {
|
||||
background: var(--accent);
|
||||
|
|
@ -16444,11 +16468,11 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
|
|||
color: var(--text-muted);
|
||||
}
|
||||
.assistant-footer[data-unfinished="true"] {
|
||||
background: var(--amber-bg);
|
||||
border-color: color-mix(in srgb, var(--amber) 35%, var(--border));
|
||||
background: var(--chat-warm-fill-strong);
|
||||
border-color: color-mix(in srgb, var(--accent) 25%, var(--chat-warm-border));
|
||||
}
|
||||
.assistant-footer[data-unfinished="true"] .dot {
|
||||
background: var(--amber);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
|
|
@ -16761,7 +16785,7 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
|
|||
gap: 2px;
|
||||
margin-left: 2px;
|
||||
padding-left: 8px;
|
||||
border-left: 1px solid var(--border);
|
||||
border-left: 1px solid var(--chat-warm-border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.assistant-feedback-button {
|
||||
|
|
@ -16780,14 +16804,14 @@ body.entry-resizing { cursor: col-resize; user-select: none; }
|
|||
overflow: visible;
|
||||
}
|
||||
.assistant-feedback-button:hover {
|
||||
background: var(--bg-subtle);
|
||||
border-color: var(--border);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
border-color: var(--chat-warm-border);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.assistant-feedback-button[data-selected="true"] {
|
||||
color: var(--accent);
|
||||
background: var(--accent-tint);
|
||||
border-color: var(--accent-soft);
|
||||
background: var(--chat-warm-fill-strong);
|
||||
border-color: var(--chat-warm-border);
|
||||
}
|
||||
.assistant-feedback-button[data-selected="true"] svg {
|
||||
fill: currentColor;
|
||||
|
|
@ -25954,6 +25978,7 @@ body.desktop-pet-shell .pet-task-item {
|
|||
.workspace-shell .workspace-tab {
|
||||
height: 30px;
|
||||
min-height: 30px;
|
||||
grid-template-columns: minmax(0, 1fr) 26px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
|
|
@ -25965,7 +25990,7 @@ body.desktop-pet-shell .pet-task-item {
|
|||
}
|
||||
.workspace-shell .workspace-tab__main {
|
||||
gap: 7px;
|
||||
padding-inline: 10px 4px;
|
||||
padding-inline: 10px 2px;
|
||||
}
|
||||
.workspace-shell .workspace-tab__label {
|
||||
font-size: 12.5px;
|
||||
|
|
@ -26203,8 +26228,8 @@ body.desktop-pet-shell .pet-task-item {
|
|||
.app .status-pill {
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-color: var(--border);
|
||||
background: var(--bg-subtle);
|
||||
border-color: var(--chat-warm-border);
|
||||
background: var(--chat-warm-fill);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
.app .op-waiting {
|
||||
|
|
|
|||
|
|
@ -421,34 +421,47 @@
|
|||
}
|
||||
.entry-nav-rail__logo {
|
||||
appearance: none;
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 3px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin-bottom: 2px;
|
||||
transition: background-color 120ms ease, border-color 120ms ease,
|
||||
transform 120ms ease;
|
||||
}
|
||||
.entry-nav-rail__logo:hover {
|
||||
background: var(--bg-subtle);
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.entry-nav-rail__logo:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.entry-nav-rail__logo:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* The logo doubles as the Home destination; when the home view is
|
||||
active it gets the same accent treatment as a primary nav button
|
||||
so users still see "you are here" without a dedicated Home icon. */
|
||||
.entry-nav-rail__logo.is-active {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.entry-nav-rail__logo-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
inset: auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
|
|
@ -459,7 +472,7 @@
|
|||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
display: inline-flex;
|
||||
|
|
@ -468,15 +481,25 @@
|
|||
cursor: pointer;
|
||||
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.entry-nav-rail__btn:hover {
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text);
|
||||
.entry-nav-rail__btn > svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 18px;
|
||||
}
|
||||
.entry-nav-rail__btn:not(.is-active):hover {
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
|
||||
color: var(--accent);
|
||||
border-color: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
|
||||
}
|
||||
.entry-nav-rail__btn.is-active {
|
||||
background: var(--accent-tint);
|
||||
color: var(--accent);
|
||||
border-color: color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
}
|
||||
.entry-nav-rail__btn.is-active:hover {
|
||||
background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
|
||||
border-color: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
|
||||
}
|
||||
.entry-nav-rail__btn:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
|
|
@ -1942,6 +1965,49 @@
|
|||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.entry-discord-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
background: var(--bg-panel);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-xs);
|
||||
transition: background-color 120ms ease, border-color 120ms ease,
|
||||
color 120ms ease, transform 120ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.entry-discord-badge:hover {
|
||||
background: var(--bg-subtle);
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.entry-discord-badge:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.entry-discord-badge:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.entry-discord-badge__icon {
|
||||
color: var(--text-strong);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.entry-discord-badge:hover .entry-discord-badge__icon {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.entry-discord-badge__label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.entry-star-badge__label {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -26,33 +26,42 @@
|
|||
.home-hero__brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.home-hero__brand-mark {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
position: relative;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 34%;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #202020;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
}
|
||||
.home-hero__brand-mark img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
[data-theme="dark"] .home-hero__brand-mark {
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html:not([data-theme]) .home-hero__brand-mark {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.home-hero__brand-mark svg {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
display: block;
|
||||
}
|
||||
.home-hero__brand-name {
|
||||
font-family: var(--serif);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.home-hero__title {
|
||||
|
|
@ -723,7 +732,7 @@
|
|||
border: 1px solid var(--border);
|
||||
border-radius: 50%;
|
||||
background: var(--bg-panel);
|
||||
color: var(--text);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -737,6 +746,12 @@
|
|||
color: var(--accent);
|
||||
transform: translateY(-0.5px);
|
||||
}
|
||||
.home-hero__attach > svg,
|
||||
.home-hero__submit > svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
}
|
||||
.home-hero__hint {
|
||||
font-size: 11.5px;
|
||||
color: var(--text-soft);
|
||||
|
|
|
|||
|
|
@ -340,7 +340,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent);
|
||||
color: var(--text-strong);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.use-everywhere-chip__label {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 229 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 30 KiB |
Loading…
Reference in a new issue