monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

add fade gradient to settings panel headers

Browse Source
This commit is contained in:
David Hill
2026-01-20 18:02:13 +00:00
parent 73b1bc42f4
commit 39afc055bf
3 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/app/src/components/settings-general.tsx
View File

@@ -37,7 +37,13 @@ export const SettingsGeneral: Component = () => {
return ( return (
<div class="flex flex-col h-full overflow-y-auto no-scrollbar"> <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
<div class="sticky top-0 z-10"> <div
class="sticky top-0 z-10"
style={{
background:
"linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
}}
>
<div class="flex flex-col gap-1 p-8 max-w-[720px]"> <div class="flex flex-col gap-1 p-8 max-w-[720px]">
<h2 class="text-16-medium text-text-strong">General</h2> <h2 class="text-16-medium text-text-strong">General</h2>
</div> </div>

8
packages/app/src/components/settings-keybinds.tsx
View File

@@ -280,7 +280,13 @@ export const SettingsKeybinds: Component = () => {
return ( return (
<div class="flex flex-col h-full overflow-y-auto no-scrollbar"> <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
<div class="sticky top-0 z-10"> <div
class="sticky top-0 z-10"
style={{
background:
"linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
}}
>
<div class="flex items-start justify-between gap-4 p-8 max-w-[720px]"> <div class="flex items-start justify-between gap-4 p-8 max-w-[720px]">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2> <h2 class="text-16-medium text-text-strong">Keyboard shortcuts</h2>

8
packages/app/src/components/settings-permissions.tsx
View File

@@ -101,7 +101,13 @@ export const SettingsPermissions: Component = () => {
return ( return (
<div class="flex flex-col h-full overflow-y-auto no-scrollbar"> <div class="flex flex-col h-full overflow-y-auto no-scrollbar">
<div class="sticky top-0 z-10"> <div
class="sticky top-0 z-10"
style={{
background:
"linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)",
}}
>
<div class="flex flex-col gap-1 p-8 max-w-[720px]"> <div class="flex flex-col gap-1 p-8 max-w-[720px]">
<h2 class="text-16-medium text-text-strong">Permissions</h2> <h2 class="text-16-medium text-text-strong">Permissions</h2>
<p class="text-14-regular text-text-weak">Control what tools the server can use by default.</p> <p class="text-14-regular text-text-weak">Control what tools the server can use by default.</p>