matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: add backdrop saturate filter

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-23 13:34:48 +02:00
parent 6de92275e0
commit 85c9395822
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/pl-fe/src/components/ui/column.tsx
View File

@ -99,7 +99,7 @@ const Column: React.FC<IColumn> = (props): JSX.Element => {
backHref={backHref}
className={clsx({
'rounded-t-3xl': !isScrolled && !transparent,
'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur': !transparent,
'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/75 backdrop-blur backdrop-saturate-200': !transparent,
'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
'-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
'-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,

2
packages/pl-fe/src/components/ui/modal.tsx
View File

@ -106,7 +106,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
})}
>
{title && (
<div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur black:bg-black/80 dark:bg-primary-900/75'>
<div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/75'>
<div
className={clsx('flex w-full items-center gap-2', {
'flex-row-reverse': closePosition === 'left',

2
packages/pl-fe/src/pages/search/search.tsx
View File

@ -70,7 +70,7 @@ const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
return (
<div
className='sticky top-[74px] z-10 w-full bg-white/90 backdrop-blur black:bg-black/80 dark:bg-primary-900/90'
className='sticky top-[74px] z-10 w-full bg-white/90 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/90'
>
<label htmlFor='search' className='sr-only'>{placeholder || intl.formatMessage(messages.placeholder)}</label>

2
packages/pl-fe/src/styles/new/components.scss
View File

@ -242,7 +242,7 @@ a.⁂-list-item,
border-radius: 9999px;
padding: 0.5rem 1rem;
color: white;
@apply bg-primary-600/80 backdrop-blur-md transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100;
@apply bg-primary-600/80 backdrop-blur-md backdrop-saturate-200 transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100;
.⁂-icon svg {
width: 1rem;

4
packages/pl-fe/src/styles/new/layout.scss
View File

@ -30,7 +30,7 @@ body {
}
.⁂-dropdown-navigation {
@apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right no-reduce-motion:scale-0;
@apply fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md backdrop-saturate-200 ease-in-out black:bg-black/80 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right no-reduce-motion:scale-0;
&__overlay {
@apply fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700;
@ -114,7 +114,7 @@ body {
}
.⁂-thumb-navigation {
@apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
@apply fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md backdrop-saturate-200 black:bg-black/75 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden;
&__item {
@apply flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600;