wehub-resource-sync
151 lines
3.5 KiB
TypeScript
151 lines
3.5 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
const baseFont =
|
|
"var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
|
|
|
|
const editorTheme = {
|
|
surface: "#FFFFFF",
|
|
border: "#EDEEEF",
|
|
text: "#191919",
|
|
primary: "#7C51F8",
|
|
primarySoft: "#F4F3FF",
|
|
danger: "#D83B3B",
|
|
} as const;
|
|
|
|
export const inlineStyles = {
|
|
toolbar: {
|
|
position: "absolute",
|
|
zIndex: 64,
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
flexWrap: "wrap",
|
|
gap: 6,
|
|
minHeight: 36,
|
|
maxWidth: "calc(100% - 16px)",
|
|
padding: "4px 6px",
|
|
borderRadius: 8,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: "rgba(255,255,255,0.96)",
|
|
boxShadow: "0 12px 34px rgba(16,19,35,0.16)",
|
|
},
|
|
iconButton: {
|
|
width: 28,
|
|
height: 28,
|
|
display: "inline-grid",
|
|
placeItems: "center",
|
|
boxSizing: "border-box",
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: editorTheme.surface,
|
|
color: editorTheme.text,
|
|
fontSize: 13,
|
|
fontWeight: 800,
|
|
lineHeight: 0,
|
|
padding: 0,
|
|
cursor: "pointer",
|
|
},
|
|
iconButtonActive: {
|
|
borderColor: editorTheme.primary,
|
|
background: editorTheme.primarySoft,
|
|
color: editorTheme.primary,
|
|
},
|
|
dangerButton: {
|
|
borderColor: editorTheme.danger,
|
|
background: editorTheme.danger,
|
|
color: "#fff",
|
|
},
|
|
numberInput: {
|
|
width: 54,
|
|
height: 28,
|
|
boxSizing: "border-box",
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: editorTheme.surface,
|
|
color: editorTheme.text,
|
|
padding: "0 6px",
|
|
font: `12px ${baseFont}`,
|
|
outline: "none",
|
|
},
|
|
textInput: {
|
|
width: 112,
|
|
height: 28,
|
|
boxSizing: "border-box",
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: editorTheme.surface,
|
|
color: editorTheme.text,
|
|
padding: "0 7px",
|
|
font: `12px ${baseFont}`,
|
|
outline: "none",
|
|
},
|
|
colorInput: {
|
|
width: 30,
|
|
height: 28,
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: editorTheme.surface,
|
|
padding: 3,
|
|
cursor: "pointer",
|
|
},
|
|
select: {
|
|
height: 28,
|
|
boxSizing: "border-box",
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: editorTheme.surface,
|
|
color: editorTheme.text,
|
|
padding: "0 7px",
|
|
font: `12px ${baseFont}`,
|
|
outline: "none",
|
|
cursor: "pointer",
|
|
},
|
|
fileButton: {
|
|
height: 28,
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
boxSizing: "border-box",
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.border}`,
|
|
background: editorTheme.surface,
|
|
color: editorTheme.text,
|
|
padding: "0 9px",
|
|
fontSize: 12,
|
|
fontWeight: 800,
|
|
cursor: "pointer",
|
|
},
|
|
actionButton: {
|
|
height: 28,
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
boxSizing: "border-box",
|
|
borderRadius: 6,
|
|
border: `1px solid ${editorTheme.primary}`,
|
|
background: editorTheme.primary,
|
|
color: "#FFFFFF",
|
|
padding: "0 9px",
|
|
fontSize: 12,
|
|
fontWeight: 900,
|
|
cursor: "pointer",
|
|
whiteSpace: "nowrap",
|
|
},
|
|
opacityInput: {
|
|
width: 74,
|
|
accentColor: editorTheme.primary,
|
|
cursor: "pointer",
|
|
},
|
|
textEditor: {
|
|
position: "absolute",
|
|
zIndex: 7,
|
|
boxSizing: "border-box",
|
|
border: `1px solid ${editorTheme.primary}`,
|
|
outline: "none",
|
|
resize: "none",
|
|
overflow: "auto",
|
|
padding: 2,
|
|
margin: 0,
|
|
background: "rgba(255,255,255,0.96)",
|
|
},
|
|
} satisfies Record<string, CSSProperties>;
|