kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-07 23:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Backdrop

Browse Source
This commit is contained in:
Manav Rathi 2025-01-14 19:50:16 +05:30
parent 8fef83adaf
commit f50c88fd15
No known key found for this signature in database
4 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/apps/photos/src/components/PhotoViewer/index.tsx
View File

@ -989,7 +989,7 @@ const CaptionContainer = styled("div")(({ theme }) => ({
maxWidth: "375px",
fontSize: "14px",
lineHeight: "17px",
backgroundColor: theme.palette.misc.backdropFaint,
backgroundColor: theme.palette.backdrop.faint,
backdropFilter: "blur(96px)",
}));

25
web/packages/base/components/utils/mui-theme.d.ts vendored
View File

@ -161,6 +161,17 @@ declare module "@mui/material/styles" {
* This does not vary with the color scheme.
*/
critical: PaletteColor;
/**
* Transparent background fills that serve as the backdrop of modals,
* dialogs and drawers etc.
*
* These change with the color scheme.
*/
backdrop: {
base: string;
muted: string;
faint: string;
};
/**
* Various ad-hoc fixed colors used by our designs.
*
@ -174,18 +185,6 @@ declare module "@mui/material/styles" {
*/
overlayIndicatorMuted: string;
};
/**
* Various ad-hoc fixed colors used by our designs.
*
* These change with the color scheme.
*/
misc: {
/**
* Fill color for the backdrop of various modals, dialogs and
* drawers etc.
*/
backdropFaint: string;
};
/**
* MUI as of v6 does not allow customizing shadows easily. This is due
* for change: https://github.com/mui/material-ui/issues/44291.
@ -208,8 +207,8 @@ declare module "@mui/material/styles" {
interface PaletteOptions {
accent?: Palette["accent"];
critical?: Palette["critical"];
backdrop?: Palette["backdrop"];
fixed?: Palette["fixed"];
misc?: Palette["misc"];
boxShadow?: Palette["boxShadow"];
}
}

10
web/packages/base/components/utils/theme.ts
View File

@ -342,8 +342,10 @@ const getPalletteOptions = (
},
divider: colors.stroke?.faint,
fixed: { ..._color.fixed },
misc: {
backdropFaint: colors.backdrop!.faint!,
backdrop: {
base: colors.backdrop!.base!,
muted: colors.backdrop!.muted!,
faint: colors.backdrop!.faint!,
},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@ -494,7 +496,7 @@ const getComponents = (
styleOverrides: {
root: {
".MuiBackdrop-root": {
backgroundColor: palette.misc?.backdropFaint,
backgroundColor: palette.backdrop?.faint,
},
},
},
@ -511,7 +513,7 @@ const getComponents = (
styleOverrides: {
root: {
".MuiBackdrop-root": {
backgroundColor: palette.misc?.backdropFaint,
backgroundColor: palette.backdrop?.faint,
},
"& .MuiDialog-paper": {
boxShadow: palette.boxShadow?.float,

36
web/packages/new/photos/components/gallery/BarImpl.tsx
View File

@ -364,24 +364,24 @@ const ScrollButtonBase: React.FC<
</ScrollButtonBase_>
);
const ScrollButtonBase_ = styled("button")`
position: absolute;
z-index: 2;
top: 7px;
height: 50px;
width: 50px;
border: none;
padding: 0;
margin: 0;
border-radius: 50%;
background-color: ${({ theme }) => theme.colors.backdrop.muted};
color: ${({ theme }) => theme.colors.stroke.base};
& > svg {
border-radius: 50%;
height: 30px;
width: 30px;
}
`;
const ScrollButtonBase_ = styled("button")(({ theme }) => ({
position: "absolute",
zIndex: 2,
top: "7px",
height: "50px",
width: "50px",
border: "none",
padding: 0,
margin: 0,
borderRadius: "50%",
backgroundColor: theme.palette.backdrop.muted,
color: theme.colors.stroke.base,
"& > svg": {
borderRadius: "50%",
height: "30px",
width: "30px",
},
}));
const ScrollButtonLeft = styled(ScrollButtonBase)`
left: 0;