Client: Replaced blur to blackout
This commit is contained in:
parent
a1b09acafa
commit
445bf4224b
@ -56,7 +56,6 @@ const StyledInvitePanel = styled.div`
|
||||
height: auto;
|
||||
width: auto;
|
||||
background: ${(props) => props.theme.infoPanel.blurColor};
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 309;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
@ -24,7 +24,7 @@
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import styled from "styled-components";
|
||||
import { Base } from "../../themes";
|
||||
import { BackdropProps } from "./Backdrop.types";
|
||||
|
||||
@ -33,11 +33,6 @@ const StyledBackdrop = styled.div<BackdropProps & { needBackground: boolean }>`
|
||||
props.needBackground
|
||||
? props.theme.backdrop.backgroundColor
|
||||
: props.theme.backdrop.unsetBackgroundColor};
|
||||
${(props) =>
|
||||
props.needBackground &&
|
||||
css`
|
||||
backdrop-filter: ${`blur(${props.theme.modalDialog.backdrop.blur}px)`};
|
||||
`};
|
||||
|
||||
display: ${(props) => (props.visible ? "block" : "none")};
|
||||
height: 100vh;
|
||||
|
@ -49,14 +49,6 @@ const StyledModal = styled.div<{ modalSwipeOffset?: number; blur?: number }>`
|
||||
.loader-wrapper {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.modal-backdrop-active {
|
||||
${(props) =>
|
||||
props.blur &&
|
||||
css`
|
||||
backdrop-filter: blur(${props.blur}px) !important;
|
||||
`};
|
||||
}
|
||||
`;
|
||||
|
||||
const Dialog = styled.div`
|
||||
|
@ -31,17 +31,6 @@ import { TTheme } from "@docspace/shared/themes";
|
||||
import { mobile } from "../../../utils";
|
||||
import { ModalDialogBackdropProps } from "../ModalDialog.types";
|
||||
|
||||
const backdropFilter = (props: {
|
||||
theme: TTheme;
|
||||
modalSwipeOffset?: number;
|
||||
}) => {
|
||||
const blur = props.theme.modalDialog.backdrop.blur;
|
||||
const swipeOffset = props.modalSwipeOffset;
|
||||
|
||||
if (!swipeOffset) return `blur(${blur}px)`;
|
||||
return `blur(${blur + swipeOffset * (blur / 120)}px)`;
|
||||
};
|
||||
|
||||
const backdropBackground = (props: {
|
||||
theme: TTheme;
|
||||
modalSwipeOffset?: number;
|
||||
@ -56,8 +45,6 @@ const backdropBackground = (props: {
|
||||
const StyledModalBackdrop = styled.div.attrs(
|
||||
(props: { theme: TTheme; modalSwipeOffset?: number; zIndex?: number }) => ({
|
||||
style: {
|
||||
backdropFilter: backdropFilter(props),
|
||||
WebkitBackdropFilter: backdropFilter(props),
|
||||
background: backdropBackground(props),
|
||||
},
|
||||
}),
|
||||
|
@ -85,7 +85,6 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
|
||||
height: auto;
|
||||
width: auto;
|
||||
background: ${(props) => props.theme.infoPanel.blurColor};
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 300;
|
||||
@media ${tablet} {
|
||||
z-index: 309;
|
||||
|
@ -29,7 +29,6 @@ import AvatarBaseReactSvgUrl from "PUBLIC_DIR/images/avatar.base.react.svg?url";
|
||||
import { globalColors } from "./globalColors";
|
||||
import { CommonTheme } from "./commonTheme";
|
||||
import { DEFAULT_FONT_FAMILY } from "../constants";
|
||||
import { color } from "storybook-static/sb-manager/chunk-INSKDKQB";
|
||||
|
||||
export type TColorScheme = {
|
||||
id: number;
|
||||
@ -92,6 +91,8 @@ const {
|
||||
darkRed,
|
||||
|
||||
lightErrorStatus,
|
||||
|
||||
blurLight,
|
||||
} = globalColors;
|
||||
|
||||
export const getBaseTheme = () => {
|
||||
@ -1337,7 +1338,7 @@ export const getBaseTheme = () => {
|
||||
},
|
||||
|
||||
backdrop: {
|
||||
backgroundColor: "rgba(6, 22, 38, 0.2)",
|
||||
backgroundColor: blurLight,
|
||||
unsetBackgroundColor: "unset",
|
||||
},
|
||||
|
||||
@ -2069,7 +2070,7 @@ export const getBaseTheme = () => {
|
||||
sectionHeaderToggleBgActive: grayLight,
|
||||
|
||||
backgroundColor: white,
|
||||
blurColor: "rgba(6, 22, 38, 0.2)",
|
||||
blurColor: blurLight,
|
||||
borderColor: grayLightMid,
|
||||
thumbnailBorderColor: grayLightMid,
|
||||
textColor: black,
|
||||
|
@ -65,6 +65,8 @@ const {
|
||||
darkErrorStatus,
|
||||
charlestonGreen,
|
||||
outerSpace,
|
||||
|
||||
blurDark,
|
||||
} = globalColors;
|
||||
|
||||
const Dark: TTheme = {
|
||||
@ -635,7 +637,7 @@ const Dark: TTheme = {
|
||||
r: 27,
|
||||
g: 27,
|
||||
b: 27,
|
||||
a: 0.4,
|
||||
a: 0.6,
|
||||
},
|
||||
blur: 9,
|
||||
},
|
||||
@ -1305,7 +1307,7 @@ const Dark: TTheme = {
|
||||
},
|
||||
|
||||
backdrop: {
|
||||
backgroundColor: "rgba(20, 20, 20, 0.8)",
|
||||
backgroundColor: blurDark,
|
||||
unsetBackgroundColor: "unset",
|
||||
},
|
||||
|
||||
@ -2041,7 +2043,7 @@ const Dark: TTheme = {
|
||||
sectionHeaderToggleBgActive: "#292929",
|
||||
|
||||
backgroundColor: black,
|
||||
blurColor: "rgba(20, 20, 20, 0.8)",
|
||||
blurColor: blurDark,
|
||||
borderColor: "#474747",
|
||||
thumbnailBorderColor: grayLightMid,
|
||||
textColor: white,
|
||||
|
@ -47,6 +47,9 @@ export const globalColors = {
|
||||
lightHover: "#F3F4F4",
|
||||
veryDarkGrey: "#3D3D3D",
|
||||
|
||||
blurLight: "rgba(6, 22, 38, 0.2)",
|
||||
blurDark: "rgba(27, 27, 27, 0.6)",
|
||||
|
||||
blueMain: "#2DA7DB",
|
||||
blueHover: "#3DB8EC",
|
||||
blueActive: "#1F97CA",
|
||||
|
Loading…
Reference in New Issue
Block a user