mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
feat: add frosted glass feature option
- Add 'Frosted Glass' to design features list in design-scheme.ts - Implement visual styling for frosted glass feature in ColorSchemeDialog - Adjust sidebar button margin in Workbench for better spacing
This commit is contained in:
parent
f0c0bf2b9a
commit
9e64c2cccf
@ -241,6 +241,20 @@ export const ColorSchemeDialog: React.FC<ColorSchemeDialogProps> = ({ setDesignS
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{f.key === 'frosted-glass' && (
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className={`w-6 h-6 rounded-lg transition-all duration-200 backdrop-blur-sm bg-white/20 border border-white/30 ${
|
||||||
|
isSelected ? 'opacity-90' : 'opacity-70'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={`absolute inset-0 w-6 h-6 rounded-lg transition-all duration-200 backdrop-blur-md bg-gradient-to-br from-white/10 to-transparent ${
|
||||||
|
isSelected ? 'opacity-60' : 'opacity-40'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
|
@ -388,8 +388,8 @@ export const Workbench = memo(
|
|||||||
<div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
|
<div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
|
||||||
<div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor gap-1.5">
|
<div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor gap-1.5">
|
||||||
<button
|
<button
|
||||||
className={`${showChat ? 'i-ph:sidebar-simple-fill' : 'i-ph:sidebar-simple'} text-lg text-bolt-elements-textSecondary`}
|
className={`${showChat ? 'i-ph:sidebar-simple-fill' : 'i-ph:sidebar-simple'} text-lg text-bolt-elements-textSecondary mr-1`}
|
||||||
disabled={!canHideChat || isSmallViewport} // expand button is disabled on mobile as it's not needed
|
disabled={!canHideChat || isSmallViewport}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (canHideChat) {
|
if (canHideChat) {
|
||||||
chatStore.setKey('showChat', !showChat);
|
chatStore.setKey('showChat', !showChat);
|
||||||
|
@ -81,6 +81,7 @@ export const designFeatures = [
|
|||||||
{ key: 'border', label: 'Subtle Border' },
|
{ key: 'border', label: 'Subtle Border' },
|
||||||
{ key: 'gradient', label: 'Gradient Accent' },
|
{ key: 'gradient', label: 'Gradient Accent' },
|
||||||
{ key: 'shadow', label: 'Soft Shadow' },
|
{ key: 'shadow', label: 'Soft Shadow' },
|
||||||
|
{ key: 'frosted-glass', label: 'Frosted Glass' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const designFonts = [
|
export const designFonts = [
|
||||||
|
Loading…
Reference in New Issue
Block a user