fix styles

This commit is contained in:
MystiPanda 2024-03-10 22:13:25 +08:00
parent 778ed62a90
commit 2ecae40130
2 changed files with 29 additions and 12 deletions

View File

@ -122,12 +122,28 @@ export const ProxyItemMini = (props: Props) => {
</Typography> </Typography>
)} )}
{!!proxy.provider && ( {!!proxy.provider && (
<TypeBox component="span">{proxy.provider}</TypeBox> <TypeBox color="text.secondary" component="span">
{proxy.provider}
</TypeBox>
)}
<TypeBox color="text.secondary" component="span">
{proxy.type}
</TypeBox>
{proxy.udp && (
<TypeBox color="text.secondary" component="span">
UDP
</TypeBox>
)}
{proxy.xudp && (
<TypeBox color="text.secondary" component="span">
XUDP
</TypeBox>
)}
{proxy.tfo && (
<TypeBox color="text.secondary" component="span">
TFO
</TypeBox>
)} )}
<TypeBox component="span">{proxy.type}</TypeBox>
{proxy.udp && <TypeBox component="span">UDP</TypeBox>}
{proxy.xudp && <TypeBox component="span">XUDP</TypeBox>}
{proxy.tfo && <TypeBox component="span">TFO</TypeBox>}
</Box> </Box>
)} )}
</Box> </Box>
@ -200,8 +216,8 @@ const Widget = styled(Box)(({ theme: { typography } }) => ({
const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({ const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({
display: "inline-block", display: "inline-block",
border: "1px solid #ccc", border: "1px solid #ccc",
borderColor: palette.mode === "light" ? "#d9d9d9" : "#424242", borderColor: "text.secondary",
color: palette.mode === "light" ? "#8c8c8c" : "#ffffff", color: "text.secondary",
borderRadius: 4, borderRadius: 4,
fontSize: 10, fontSize: 10,
fontFamily: typography.fontFamily, fontFamily: typography.fontFamily,

View File

@ -45,7 +45,7 @@ export const ProxyRender = (props: RenderProps) => {
dense dense
style={{ style={{
background: itembackgroundcolor, background: itembackgroundcolor,
height: "64px", height: "100%",
margin: "8px 8px", margin: "8px 8px",
borderRadius: "8px", borderRadius: "8px",
}} }}
@ -81,7 +81,6 @@ export const ProxyRender = (props: RenderProps) => {
primary={<StyledPrimary>{group.name}</StyledPrimary>} primary={<StyledPrimary>{group.name}</StyledPrimary>}
secondary={ secondary={
<ListItemTextChild <ListItemTextChild
color="text.secondary"
sx={{ sx={{
overflow: "hidden", overflow: "hidden",
display: "flex", display: "flex",
@ -91,7 +90,9 @@ export const ProxyRender = (props: RenderProps) => {
> >
<Box sx={{ marginTop: "2px" }}> <Box sx={{ marginTop: "2px" }}>
<StyledTypeBox>{group.type}</StyledTypeBox> <StyledTypeBox>{group.type}</StyledTypeBox>
<StyledSubtitle>{group.now}</StyledSubtitle> <StyledSubtitle sx={{ color: "text.secondary" }}>
{group.now}
</StyledSubtitle>
</Box> </Box>
</ListItemTextChild> </ListItemTextChild>
} }
@ -179,7 +180,7 @@ export const ProxyRender = (props: RenderProps) => {
}; };
const StyledPrimary = styled("span")` const StyledPrimary = styled("span")`
font-size: 14px; font-size: 15px;
font-weight: 700; font-weight: 700;
line-height: 1.5; line-height: 1.5;
overflow: hidden; overflow: hidden;
@ -187,7 +188,7 @@ const StyledPrimary = styled("span")`
white-space: nowrap; white-space: nowrap;
`; `;
const StyledSubtitle = styled("span")` const StyledSubtitle = styled("span")`
font-size: 12px; font-size: 13px;
overflow: hidden; overflow: hidden;
color: text.secondary; color: text.secondary;
text-overflow: ellipsis; text-overflow: ellipsis;