duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(toolbar): make the bar a semi-transparent gray

Browse Source 
Change the toolbar surface from near-opaque dark (rgba(18,19,24,0.97)) to a
semi-transparent gray (rgba(62,64,72,0.55)) so the room shows through, per the
reference look.
This commit is contained in:
simoleo89
2026-06-14 21:11:57 +02:00
parent 450db9f817
commit ba4c2f1027
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolbar/ToolbarView.tsx
+3 -3
View File
@@ -189,7 +189,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
animate={ visibilityVariant } animate={ visibilityVariant }
variants={ shellVariants } variants={ shellVariants }
transition={ SHELL_TRANSITION } transition={ SHELL_TRANSITION }
className={ `pointer-events-none fixed bottom-0 left-0 right-0 z-[39] h-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(18,19,24,0.97)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)] ${ desktopBlockClasses }` } /> className={ `pointer-events-none fixed bottom-0 left-0 right-0 z-[39] h-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(62,64,72,0.55)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)] ${ desktopBlockClasses }` } />
<motion.div <motion.div
initial="visible" initial="visible"
@@ -320,7 +320,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
animate={ visibilityVariant } animate={ visibilityVariant }
variants={ mobileNavVariants } variants={ mobileNavVariants }
transition={ NAV_TRANSITION } transition={ NAV_TRANSITION }
className={ `fixed left-1/2 bottom-0 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible ${ mobileOnlyClasses } ${ isInRoom ? 'rounded-[12px] border border-white/8 bg-[rgba(18,19,24,0.97)] px-[6px] py-[4px] mb-[3px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : '' }` }> className={ `fixed left-1/2 bottom-0 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible ${ mobileOnlyClasses } ${ isInRoom ? 'rounded-[12px] border border-white/8 bg-[rgba(62,64,72,0.55)] px-[6px] py-[4px] mb-[3px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : '' }` }>
<motion.div <motion.div
variants={ containerVariants } variants={ containerVariants }
className="tb-bar-scroll flex h-full min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-visible px-1"> className="tb-bar-scroll flex h-full min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-visible px-1">
@@ -415,7 +415,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
variants={ mobileNavVariants } variants={ mobileNavVariants }
transition={ NAV_TRANSITION } transition={ NAV_TRANSITION }
style={ staffStackBottom != null ? { top: 'auto', bottom: `${ staffStackBottom }px` } : undefined } style={ staffStackBottom != null ? { top: 'auto', bottom: `${ staffStackBottom }px` } : undefined }
className={ `fixed left-1 z-40 flex flex-col items-center gap-2 rounded-[12px] border border-white/8 bg-[rgba(18,19,24,0.97)] px-[4px] py-[6px] shadow-[0_6px_18px_rgba(0,0,0,0.18)] ${ staffStackBottom == null ? 'top-1/2 -translate-y-1/2' : '' } ${ mobileOnlyClasses }` }> className={ `fixed left-1 z-40 flex flex-col items-center gap-2 rounded-[12px] border border-white/8 bg-[rgba(62,64,72,0.55)] px-[4px] py-[6px] shadow-[0_6px_18px_rgba(0,0,0,0.18)] ${ staffStackBottom == null ? 'top-1/2 -translate-y-1/2' : '' } ${ mobileOnlyClasses }` }>
<motion.div variants={ itemVariants }> <motion.div variants={ itemVariants }>
<ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" /> <ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" />
</motion.div> </motion.div>