2022-12-08 12:14:18 +08:00
|
|
|
import { css, Global } from '@emotion/react';
|
|
|
|
import React from 'react';
|
|
|
|
import useSiteToken from '../../../hooks/useSiteToken';
|
|
|
|
|
|
|
|
export default () => {
|
|
|
|
const { token } = useSiteToken();
|
|
|
|
|
|
|
|
const { iconCls } = token;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Global
|
|
|
|
styles={css`
|
2022-12-19 13:23:28 +08:00
|
|
|
.icon-pic-searcher {
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0 8px;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
.icon-pic-btn {
|
|
|
|
color: ${token.colorIcon};
|
|
|
|
cursor: pointer;
|
|
|
|
transition: all 0.3s;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
&:hover {
|
|
|
|
color: ${token.colorIconHover};
|
2022-12-08 12:14:18 +08:00
|
|
|
}
|
|
|
|
}
|
2022-12-19 13:23:28 +08:00
|
|
|
}
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
.icon-pic-preview {
|
|
|
|
width: 66px;
|
|
|
|
height: 66px;
|
|
|
|
margin-top: 10px;
|
|
|
|
padding: 8px;
|
|
|
|
text-align: center;
|
|
|
|
border: 1px solid ${token.colorBorder};
|
|
|
|
border-radius: 4px;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
> img {
|
|
|
|
max-width: 50px;
|
|
|
|
max-height: 50px;
|
2022-12-08 12:14:18 +08:00
|
|
|
}
|
2022-12-19 13:23:28 +08:00
|
|
|
}
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
.icon-pic-search-result {
|
|
|
|
min-height: 50px;
|
|
|
|
padding: 0 10px;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
> .result-tip {
|
|
|
|
padding: 10px 0;
|
|
|
|
color: ${token.colorTextSecondary};
|
|
|
|
}
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
> table {
|
|
|
|
width: 100%;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
.col-icon {
|
|
|
|
width: 80px;
|
|
|
|
padding: 10px 0;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
> ${iconCls} {
|
|
|
|
font-size: 30px;
|
2022-12-08 12:14:18 +08:00
|
|
|
|
2022-12-19 13:23:28 +08:00
|
|
|
:hover {
|
|
|
|
color: ${token.colorLinkHover};
|
2022-12-08 12:14:18 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-12-19 13:23:28 +08:00
|
|
|
}
|
|
|
|
`}
|
2022-12-08 12:14:18 +08:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|