casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #687 from m-tartari/refactor/toolbar/bg-dark

Browse Source 
♻️ refactor: add transparency to toolbar and project spotlight background
This commit is contained in:
Michele Tartari
2025-12-12 15:17:55 +01:00
committed by GitHub
parent 734dc9b5a9 9e08b32cde
commit e2b53be50b
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx
+9 -8
View File
@@ -30,8 +30,8 @@ const Description = (props: Props) => {
justifyContent: 'center', justifyContent: 'center',
position: 'absolute', position: 'absolute',
bgcolor: 'background.default', backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
opacity: 0.9, backdropFilter: 'blur(8px)',
bottom: '0', bottom: '0',
borderTopStyle: 'solid', borderTopStyle: 'solid',
@@ -56,8 +56,9 @@ const Description = (props: Props) => {
sx={theme => ({ sx={theme => ({
display: 'flex', display: 'flex',
position: 'absolute', position: 'absolute',
bgcolor: 'background.default',
opacity: 0.9, backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
backdropFilter: 'blur(8px)',
top: '0', top: '0',
ml: 'auto', ml: 'auto',
borderBottomWidth: theme.spacing(0.5), borderBottomWidth: theme.spacing(0.5),
@@ -85,8 +86,8 @@ const Description = (props: Props) => {
height: '102%', height: '102%',
width: '28em', width: '28em',
position: 'absolute', position: 'absolute',
bgcolor: 'background.default', backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
opacity: 0.9, backdropFilter: 'blur(8px)',
right: '0', right: '0',
borderLeftWidth: theme.spacing(0.5), borderLeftWidth: theme.spacing(0.5),
// borderLeftWidth: '0.35em', // borderLeftWidth: '0.35em',
@@ -107,8 +108,8 @@ const Description = (props: Props) => {
height: '102%', height: '102%',
width: '28em', width: '28em',
position: 'absolute', position: 'absolute',
bgcolor: 'background.default', backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)',
opacity: 0.9, backdropFilter: 'blur(8px)',
left: '0', left: '0',
borderRightWidth: theme.spacing(0.5), borderRightWidth: theme.spacing(0.5),
// borderLeftWidth: '0.35em', // borderLeftWidth: '0.35em',
src/components/molecules/Toolbar/index.tsx
+6 -1
View File
@@ -109,8 +109,13 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
elevation={theme.palette.mode === 'light' ? 1 : 0} elevation={theme.palette.mode === 'light' ? 1 : 0}
{...props} {...props}
sx={{ sx={{
backgroundColor: trigger ? 'background.paper' : 'transparent', backgroundColor: 'transparent',
'@media print': { backgroundColor: 'background.default' }, '@media print': { backgroundColor: 'background.default' },
...(trigger && {
backgroundColor: 'hsla(230, 18%, 13%, 0.75)',
backdropFilter: 'blur(8px)',
boxShadow: theme.shadows[4],
}),
...(theme.palette.mode === 'light' && { ...(theme.palette.mode === 'light' && {
backgroundColor: 'hsla(0, 0%, 100%, 0.75)', backgroundColor: 'hsla(0, 0%, 100%, 0.75)',
backdropFilter: 'blur(8px)', backdropFilter: 'blur(8px)',