@teamsparta/chat-ui
Version:
simple chat-ui
79 lines (78 loc) • 2.28 kB
JavaScript
import styled from "@emotion/styled";
import { additional, neutralDay } from "@teamsparta/design-system";
export const Container = styled.div`
background-color: ${({
theme
}) => theme === "dark" ? neutralDay.gray100 : neutralDay.gray0};
width: 100%;
padding: 16px;
display: flex;
overflow-x: scroll;
white-space: nowrap;
gap: 12px;
box-sizing: border-box;
min-height: 74px;
// 스크롤바 숨기기
&::-webkit-scrollbar {
display: none; // Webkit 브라우저용(예: Chrome, Safari)
}
-ms-overflow-style: none; // IE, Edge 브라우저용
scrollbar-width: none; // Firefox 브라우저용
`;
export const BorderDiv = styled.div`
background-color: ${({
theme
}) => theme === "dark" ? neutralDay.gray95 : neutralDay.gray5};
border: 1px solid transparent;
border-radius: 100px;
border: 1px solid
${({
theme
}) => theme === "dark" ? neutralDay.gray90 : neutralDay.gray20};
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
min-width: fit-content;
`;
export const GradationBorderDiv = styled.div`
background-color: ${({
theme
}) => theme === "dark" ? `rgba(128, 194, 255, 0.20)` : neutralDay.gray5};
border: 1px solid
${({
theme
}) => theme === "dark" ? additional.blue50 : `transparent`};
border-radius: 100px; /* 테두리 둥글기 */
background-image: ${({
theme
}) => theme === "dark" ? `` : `linear-gradient(${neutralDay.gray5}, ${neutralDay.gray5}),
linear-gradient(to right, #146aff 0%, #189fec 100%)`};
background-origin: border-box;
background-clip: content-box, border-box;
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
min-width: fit-content;
`;
export const EmojiSpan = styled.span`
padding: 0 5px; // 필요에 따라 조정
-webkit-background-clip: unset;
`;
export const Span = styled.span`
color: ${({
theme
}) => theme === "dark" ? neutralDay.gray5 : neutralDay.gray80};
padding: 10px 20px;
`;
export const GradationSpan = styled.span`
background-image: ${({
theme
}) => theme === "dark" ? `linear-gradient(90deg, #14ffff 0%, #3cb6fb 100%)` : ``};
background-clip: text;
-webkit-background-clip: text;
color: ${({
theme
}) => theme === "dark" ? "transparent" : neutralDay.gray80};
`;