ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add blur effects

Browse Source
This commit is contained in:
IRBorisov 2024-04-03 21:53:11 +03:00
parent 26a7f2dee5
commit fc70140718
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rsconcept/frontend/src/components/ui/Modal.tsx
View File

@ -57,7 +57,8 @@ function Modal({
return ( return (
<> <>
<div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'clr-modal-backdrop')} /> <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
<div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')} />
<motion.div <motion.div
ref={ref} ref={ref}
className={clsx( className={clsx(

2
rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
View File

@ -53,7 +53,7 @@ function GraphToolbar({
return ( return (
<Overlay <Overlay
position='top-0 pt-1 right-1/2 translate-x-1/2' position='top-0 pt-1 right-1/2 translate-x-1/2'
className='flex flex-col items-center bg-opacity-10 clr-app' className='flex flex-col items-center rounded-b-2xl cc-blur'
> >
<div className='cc-icons'> <div className='cc-icons'>
<MiniButton <MiniButton

19
rsconcept/frontend/src/styling/styles.css
View File

@ -25,10 +25,6 @@
} }
@layer components { @layer components {
.clr-modal-backdrop {
opacity: 0.75;
}
:is( :is(
.clr-border, .clr-border,
.border, .border,
@ -57,7 +53,7 @@
} }
} }
:is(.clr-app, .clr-footer, .clr-modal-backdrop, .clr-btn-nav, .clr-input:disabled) { :is(.clr-app, .clr-footer, .cc-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
background-color: var(--cl-bg-100); background-color: var(--cl-bg-100);
.dark & { .dark & {
background-color: var(--cd-bg-100); background-color: var(--cd-bg-100);
@ -199,6 +195,15 @@
} }
} }
.cc-modal-blur {
opacity: 0.3;
backdrop-filter: blur(2px);
}
.cc-modal-backdrop {
opacity: 0.5;
}
.cc-label { .cc-label {
@apply text-sm font-medium cursor-default select-text whitespace-nowrap; @apply text-sm font-medium cursor-default select-text whitespace-nowrap;
} }
@ -210,4 +215,8 @@
.cc-icons { .cc-icons {
@apply flex gap-1; @apply flex gap-1;
} }
.cc-blur {
backdrop-filter: blur(3px);
}
} }