mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
Slated light mode
This commit is contained in:
parent
38cc461569
commit
bd14f6be6a
@ -7,7 +7,7 @@ export default function Footer () {
|
||||
<footer>
|
||||
<Separator />
|
||||
|
||||
<div className="flex flex-col md:flex-row p-4 gap-4 backdrop-blur-md bg-white/20 dark:bg-black/20">
|
||||
<div className="flex flex-col md:flex-row p-4 gap-4 backdrop-blur-md bg-slate-200/20 dark:bg-black/20">
|
||||
<div className="flex flex-col gap-4 md:flex-1">
|
||||
<ul className="flex gap-4 flex-grow">
|
||||
{[
|
||||
|
||||
@ -427,7 +427,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
|
||||
<X className="w-4 h-4 ml-1 mt-0.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-4 justify-center items-center border rounded-2xl py-4 px-8 backdrop-blur-md bg-white/20 dark:bg-black/20">
|
||||
<div className="flex gap-4 justify-center items-center border rounded-2xl py-4 px-8 backdrop-blur-md bg-slate-200/20 dark:bg-black/20">
|
||||
<GlobeIllustration />
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
@ -511,14 +511,14 @@ export default function SidebarLayout(props: { projectId: string, children?: Rea
|
||||
return (
|
||||
<div className="w-full flex">
|
||||
{/* Left Sidebar */}
|
||||
<div className="flex-col border-r min-w-[240px] h-screen sticky top-0 hidden md:flex backdrop-blur-md bg-white/20 dark:bg-black/20 z-[10]">
|
||||
<div className="flex-col border-r min-w-[240px] h-screen sticky top-0 hidden md:flex backdrop-blur-md bg-slate-200/20 dark:bg-black/20 z-[10]">
|
||||
<SidebarContent projectId={props.projectId} />
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex flex-col flex-grow w-0">
|
||||
{/* Header */}
|
||||
<div className="h-14 border-b flex items-center justify-between sticky top-0 backdrop-blur-md bg-white/20 dark:bg-black/20 z-10 px-4 md:px-6">
|
||||
<div className="h-14 border-b flex items-center justify-between sticky top-0 backdrop-blur-md bg-slate-200/20 dark:bg-black/20 z-10 px-4 md:px-6">
|
||||
<div className="hidden md:flex">
|
||||
<HeaderBreadcrumb projectId={props.projectId} />
|
||||
</div>
|
||||
@ -558,7 +558,7 @@ export default function SidebarLayout(props: { projectId: string, children?: Rea
|
||||
</div>
|
||||
|
||||
{/* Stack Companion - Sticky positioned like left sidebar */}
|
||||
<div className="h-screen sticky top-0 backdrop-blur-md bg-white/20 dark:bg-black/20 z-[10]">
|
||||
<div className="h-screen sticky top-0 backdrop-blur-md bg-slate-200/20 dark:bg-black/20 z-[10]">
|
||||
<StackCompanion onExpandedChange={setCompanionExpanded} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -125,8 +125,8 @@ function EditableInput({
|
||||
tabIndex={readOnly ? -1 : undefined}
|
||||
className={cn(
|
||||
"w-full px-1 py-0 h-[unset] border-transparent",
|
||||
/* Hover */ !readOnly && "hover:ring-1 hover:ring-slate-300 dark:hover:ring-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:cursor-pointer",
|
||||
/* Focus */ !readOnly && "focus:cursor-[unset] focus-visible:ring-slate-500 dark:focus-visible:ring-slate-50 focus-visible:bg-slate-100 dark:focus-visible:bg-slate-800",
|
||||
/* Hover */ !readOnly && "hover:ring-1 hover:ring-slate-300 dark:hover:ring-gray-500 hover:bg-slate-50 dark:hover:bg-gray-800 hover:cursor-pointer",
|
||||
/* Focus */ !readOnly && "focus:cursor-[unset] focus-visible:ring-slate-500 dark:focus-visible:ring-gray-50 focus-visible:bg-slate-100 dark:focus-visible:bg-gray-800",
|
||||
readOnly && "focus-visible:ring-0 cursor-default",
|
||||
shiftTextToLeft && "ml-[-7px]",
|
||||
inputClassName,
|
||||
|
||||
@ -1815,7 +1815,7 @@ function BigIconButton({ icon, children, ...props }: { icon: React.ReactNode} &
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("h-20 w-20 p-1 rounded-full backdrop-blur-md bg-white/20 dark:bg-black/20")}
|
||||
className={cn("h-20 w-20 p-1 rounded-full backdrop-blur-md bg-slate-200/20 dark:bg-black/20")}
|
||||
{...props}
|
||||
>
|
||||
{icon}
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
--success: 120 40% 50%;
|
||||
--success-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 5.9% 80%;
|
||||
--border-in-card: 240 5.9% 80%;
|
||||
--border: 240 5.9% 90%;
|
||||
--border-in-card: 240 5.9% 90%;
|
||||
--input: 240 5.9% 80%;
|
||||
--input-in-card: 240 5.9% 80%;
|
||||
--ring: 240 10% 3.9%;
|
||||
|
||||
@ -11,7 +11,7 @@ export function Navbar({ ...props }) {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
return (
|
||||
<header
|
||||
className={`sticky top-0 z-30 flex items-center justify-between border-b backdrop-blur-md bg-white/20 dark:bg-black/20 px-4 shrink-0 ${props.className || ""}`}
|
||||
className={`sticky top-0 z-30 flex items-center justify-between border-b backdrop-blur-md bg-slate-200/20 dark:bg-black/20 px-4 shrink-0 ${props.className || ""}`}
|
||||
style={{ height: `50px` }}
|
||||
>
|
||||
<div className="flex items-center justify-center">
|
||||
|
||||
@ -214,8 +214,8 @@ export function StackCompanion({ className, onExpandedChange }: StackCompanionPr
|
||||
{/* Single Expanding Sidebar */}
|
||||
<div
|
||||
className={cn(
|
||||
"h-screen bg-background border-l shadow-lg flex relative",
|
||||
isExpanded ? "" : "w-12",
|
||||
"h-screen border-l flex relative",
|
||||
isExpanded ? "shadow-lg" : "w-12",
|
||||
!isResizing ? "transition-all duration-300 ease-in-out" : ""
|
||||
)}
|
||||
style={isExpanded ? { width: `${width}px` } : undefined}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user