buzzert/Sybil-2
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

No rounded corners

Browse Source
This commit is contained in:
buzzert
2026-09-30 21:30:54 -07:00
parent 4ef48fad82
commit 14191de8f4
4 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.tsx
+3 -3
View File
@@ -3440,7 +3440,7 @@ export default function App() {
return (
<div className="app-grid-surface app-safe-frame h-full">
<div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent md:gap-2">
<div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent">
{isMobileSidebarOpen ? (
<button
type="button"
@@ -3452,7 +3452,7 @@ export default function App() {
<aside
className={cn(
"workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
"workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none",
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
)}
>
@@ -3609,7 +3609,7 @@ export default function App() {
</aside>
<main
className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden md:touch-auto"
onTouchStart={handleMobileWorkspaceTouchStart}
onTouchMove={handleMobileWorkspaceTouchMove}
onTouchEnd={handleMobileWorkspaceTouchEnd}
web/src/components/chat/chat-messages-panel.tsx
+3 -3
View File
@@ -378,13 +378,13 @@ function ToolCallStack({
);
})}
{!expanded && hiddenCount ? (
<span className="absolute bottom-1 right-10 z-20 rounded-full border border-cyan-300/30 bg-slate-950/86 px-2 py-0.5 text-[10px] font-semibold leading-none text-cyan-100 shadow-sm">
<span className="absolute bottom-1 right-10 z-20 rounded-none border border-cyan-300/30 bg-slate-950/86 px-2 py-0.5 text-[10px] font-semibold leading-none text-cyan-100 shadow-sm">
+{hiddenCount}
</span>
) : null}
<button
type="button"
className="tool-call-stack-toggle absolute right-0 top-2 z-20 flex h-8 w-8 items-center justify-center rounded-full"
className="tool-call-stack-toggle absolute right-0 top-2 z-20 flex h-8 w-8 items-center justify-center rounded-none"
aria-expanded={expanded ? "true" : "false"}
aria-label={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
title={`${expanded ? "Collapse" : "Expand"} ${countLabel}`}
@@ -603,7 +603,7 @@ export function ChatMessagesPanel({ messages, isLoading, isSending, onMessageCon
className={cn(
"max-w-[85%] space-y-3",
isUser
? "rounded-xl border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
? "chat-user-message border border-violet-300/24 bg-[linear-gradient(135deg,hsl(258_86%_48%_/_0.86),hsl(278_72%_29%_/_0.86))] px-4 py-3 text-sm leading-6 text-fuchsia-50 shadow-sm"
: "text-base leading-7 text-violet-50"
)}
onContextMenu={
web/src/index.css
+16 -28
View File
@@ -31,7 +31,7 @@
--secondary-foreground: 254 38% 94%;
--accent: 188 86% 50%;
--accent-foreground: 230 45% 8%;
--radius: 0.5rem;
--radius: 0px;
}
* {
@@ -72,6 +72,7 @@ select,
textarea {
font: inherit;
color-scheme: dark;
border-radius: var(--radius);
}
::selection {
@@ -148,14 +149,6 @@ textarea {
padding: 0.75rem 1.25rem;
}
.app-safe-frame {
padding:
max(0.5rem, var(--safe-area-top))
max(0.5rem, var(--safe-area-right))
max(0.5rem, var(--safe-area-bottom))
max(0.5rem, var(--safe-area-left));
}
.app-search-safe-pad {
padding:
max(1.5rem, var(--safe-area-top))
@@ -166,19 +159,11 @@ textarea {
}
@media (horizontal-viewport-segments: 2) {
.app-safe-frame {
padding:
max(0.5rem, var(--safe-area-top))
max(0.5rem, var(--safe-area-right))
max(0.5rem, var(--safe-area-bottom))
max(0.5rem, var(--safe-area-left));
}
.workspace-shell {
display: grid;
grid-template-columns:
calc(env(viewport-segment-width 0 0) - max(0.5rem, var(--safe-area-left)))
calc(env(viewport-segment-width 1 0) - max(0.5rem, var(--safe-area-right)));
calc(env(viewport-segment-width 0 0) - var(--safe-area-left))
calc(env(viewport-segment-width 1 0) - var(--safe-area-right));
column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
}
@@ -187,14 +172,10 @@ textarea {
width: 100%;
max-width: none;
transform: none;
border-width: 1px;
border-radius: 1rem;
}
.workspace-content {
min-width: 0;
border-width: 1px;
border-radius: 1rem;
touch-action: auto;
}
@@ -213,6 +194,13 @@ textarea {
0 14px 36px hsl(240 80% 2% / 0.28);
}
.chat-user-message {
/* Preserve the original bubble radius independently of the square UI theme.
Browsers without corner-shape support fall back to circular corners. */
border-radius: 0.75rem;
corner-shape: squircle;
}
.tool-call-stack-shell {
perspective: 900px;
transform-style: preserve-3d;
@@ -464,7 +452,7 @@ textarea {
overflow-x: auto;
overflow-y: hidden;
border: 1px solid hsl(var(--border) / 0.86);
border-radius: 0.625rem;
border-radius: var(--radius);
background: hsl(246 34% 10% / 0.76);
box-shadow: inset 0 1px 0 hsl(258 80% 88% / 0.06);
}
@@ -483,7 +471,7 @@ textarea {
}
.md-table-scroll::-webkit-scrollbar-thumb {
border-radius: 9999px;
border-radius: var(--radius);
background: hsl(263 78% 72% / 0.34);
}
@@ -595,7 +583,7 @@ textarea {
.md-content code {
background: hsl(249 40% 10% / 0.78);
border-radius: 0.3rem;
border-radius: var(--radius);
padding: 0.05rem 0.3rem;
font-size: 0.86em;
box-decoration-break: clone;
@@ -605,7 +593,7 @@ textarea {
.md-content pre {
overflow-x: auto;
border: 1px solid hsl(253 31% 29% / 0.72);
border-radius: 0.625rem;
border-radius: var(--radius);
background: hsl(249 40% 10% / 0.82);
padding: 0.75rem;
box-shadow: inset 0 1px 0 hsl(258 80% 88% / 0.05);
@@ -629,7 +617,7 @@ textarea {
.md-cite-token {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border-radius: var(--radius);
border: 1px solid hsl(274 40% 55%);
background: hsl(277 33% 21%);
color: hsl(304 42% 96%);
web/tailwind.config.ts
+7 -2
View File
@@ -29,9 +29,14 @@ const config: Config = {
},
},
borderRadius: {
// Keep surfaces square at every size; rounded-full is reserved for dots.
DEFAULT: "var(--radius)",
sm: "var(--radius)",
md: "var(--radius)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
xl: "var(--radius)",
"2xl": "var(--radius)",
"3xl": "var(--radius)",
},
},
},