ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 04:50:36 +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 (
<>
<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
ref={ref}
className={clsx(

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

@ -53,7 +53,7 @@ function GraphToolbar({
return (
<Overlay
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'>
<MiniButton

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

@ -25,10 +25,6 @@
}
@layer components {
.clr-modal-backdrop {
opacity: 0.75;
}
:is(
.clr-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);
.dark & {
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 {
@apply text-sm font-medium cursor-default select-text whitespace-nowrap;
}
@ -210,4 +215,8 @@
.cc-icons {
@apply flex gap-1;
}
.cc-blur {
backdrop-filter: blur(3px);
}
}