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", CRIMSON: "#DC143C",
DARK_SALMON: "#E9967A", DARK_SALMON: "#E9967A",
DANGER: "#F26522", DANGER: "#F26522",
SEAGREEN: "#3BA55D", LIGHTGREEN: "#90EE90",
ORANGE: "#FAA81A", ORANGE: "#FAA81A",
SILVER: "#B9BBBE", SILVER: "#B9BBBE",
SILVER_DARK: "#4D4D4D" SILVER_DARK: "#4D4D4D"

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

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