GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-20 05:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

update color

Browse Source
This commit is contained in:
Aykut Saraç 2022-03-18 10:54:41 +03:00
parent 1076158afb
commit 74c226137a
2 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/constants/theme.ts
View File

@ -11,7 +11,7 @@ export const darkTheme: DefaultTheme = {
CRIMSON: "#DC143C",
DARK_SALMON: "#E9967A",
DANGER: "#F26522",
SEAGREEN: "#3BA55D",
LIGHTGREEN: "#90EE90",
ORANGE: "#FAA81A",
SILVER: "#B9BBBE",
SILVER_DARK: "#4D4D4D"

70
src/containers/LiveEditor/CustomNode/styles.tsx
View File

@ -1,49 +1,53 @@
import styled from "styled-components";
export const StyledTextWrapper = styled.div`
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
`;
export const StyledText = styled.pre<{ width: number; height: number }>`
display: flex;
justify-content: center;
flex-direction: column;
width: ${({ width }) => width};
height: ${({ height }) => height};
color: ${({ theme }) => theme.SILVER};
export const StyledText = styled.pre<{
width: number;
height: number;
}>`
display: flex;
justify-content: center;
flex-direction: column;
width: ${({ width }) => width};
height: ${({ height }) => height};
color: ${({ theme }) => theme.SILVER};
`;
export const StyledForeignObject = styled.foreignObject<{
width: number;
height: number;
width: number;
height: number;
}>`
position: "relative" !important;
pointer-events: "none" !important;
width: ${({ width }) => width + "px"};
height: ${({ height }) => height + "px"};
position: "relative" !important;
pointer-events: "none" !important;
width: ${({ width }) => width + "px"};
height: ${({ height }) => height + "px"};
`;
export const StyledKey = styled.span<{
bond?: boolean;
arrayValue?: boolean;
objectKey?: boolean;
parent?: boolean;
}>`
color: ${({ theme, bond, arrayValue }) =>
bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
font-style: ${({ parent, objectKey }) => !(parent || objectKey) && "italic"};
color: ${({ theme, objectKey, parent }) =>
parent ? theme.ORANGE : objectKey ? theme.BLURPLE : theme.LIGHTGREEN};
`;
export const StyledRow = styled.div<{ width: number }>`
height: fit-content;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 auto;
width: ${({ width }) => `${width - 20}px`};
`;
height: fit-content;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 auto;
width: ${({ width }) => `${width - 20}px`};
`;