챗봇시스템 CSS
박진규
2023-08-11 14:59
15
0
본문
header
<div class="header">
<div class="header-fontDiv">클럽클리오 고객센터
</div>
<p style="color:white;font-size: 0.8rem;">운영시간 : 평일 10:00~17:00 (점심시간:12:30~1:30)</p>
</div>
CSS
/*사용중*/
html {
font-size: 14px;
}
.chat-input {
background-color: #C3C3C3;
}
.input-container input {
display: none;
}
.header {
padding: 20px 40px;
background-color: #323131;
}
.header-fontDiv {
font-size: 16px;
margin-bottom: -15px;
color: white;
}
.input-container input {
font-size: 0.875rem;
line-height: 1.25rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif
}
/* welcome */
.welcome-btnDiv {
display: flex;
align-items: stretch;
flex-direction: column;
}
.welcome-btnDiv-row {
display: flex;
justify-content: space-evenly;
margin: 5px;
}
.welcome-btn1 {
color: black;
border-radius: 25px;
text-decoration: none;
border: solid 1px #C3C3C3;
background-color: white;
width: 33%;
text-align: center;
}
/*버튼 */
.chs {
margin: 3px 15px 3px 30px;
text-align: left;
}
.chs a {
color: black;
text-decoration: none;
}
.chs-btn1 {
background-color: white;
color: #C3C3C3;
padding: 10px 20px;
border: solid 1px #C3C3C3;
border-radius: 25px;
margin: 5px;
}
.chs-btn2 {
background-color: white;
color: black;
padding: 10px 20px;
border: solid 1px #C3C3C3;
border-radius: 25px;
margin: 5px;
}
.chs-btn3 {
background-color: white;
color: black;
padding: 5px 10px;
border: solid 1px #C3C3C3;
border-radius: 25px;
margin: 5px;
}
.agent {
margin-top: 10px;
margin-left: 35px;
text-align: left;
}
.agent-btn {
background-color: #ffa500;
color: white;
padding: 10px 20px;
border: none;
border-radius: 25px;
margin: 5px;
}
.searchDiv {
margin: 1px 25px;
}
.inputTxt {
padding: 8px;
margin: 5px;
border-radius: 5px;
}
.searchBtn {
background-color: rgb(128, 128, 128);
color: white;
color: white;
padding: 10px 20px;
border: none;
border-radius: 25px;
}
.itemCarousel {
width: 90%;
height: 250px;
overflow: hidden;
margin-left: 30px;
}
.itemCarousel-cell {
height: 100%;
display: flex;
flex-direction: column;
border: solid 1px #C3C3C3;
border-radius: 30px;
margin-right: 2px;
justify-content: space-evenly;
}
.itemCarousel-cell-img {
max-height: 100%;
max-width: 55%;
border-radius: 50%;
}
.itemCarousel-cell-link {
height: 20%;
text-align: center;
padding: 0 5px;
flex-basis: fit-content;
width: 90%;
margin-left: 5%;
margin-right: 5%;
font-weight: bold;
margin-bottom: 10px;
}
.itemCarousel-cell-lbl {
text-align: center;
width: 90%;
text-align: center;
margin: 0px 5% 0 5%;
font-weight: bold;
}
/*---------------------- 구분선 ------------------------*/
/*챗봇 이름*/
.ai-name {
margin-left: 38px;
margin-top: -35px;
position: absolute;
color: rgb(104, 115, 125);
font-size: 15px;
text-decoration: underline;
}
/*상단 날짜*/
.chat-date-divider {
display: none;
}
/*초기 carousel*/
.welcome-carousel {
width: 90%;
height: 300px;
overflow: hidden;
margin-left: 30px;
}
.welcome-carousel-cell {
height: 100%;
display: flex;
flex-direction: column;
border: solid 1px #C3C3C3;
border-radius: 30px;
margin-right: 5px;
justify-content: space-evenly;
}
.welcome-goods {
height: 20%;
text-align: left;
padding: 0 5px;
flex-basis: fit-content;
margin-left: 10px;
margin-bottom: 5px;
}
.welcome-button {
background-color: #ffa500;
color: white;
padding: 10px 45px;
border: none;
border-radius: 25px;
}
/* welcome-하단버튼 */
.bottom-btn {
margin-top: 15px;
text-align: left;
margin-left: 30px;
}
.bottom-btn .btn1 {
background-color: white;
color: #ffa500;
padding: 10px 20px;
border: solid 1px #C3C3C3;
border-radius: 25px;
}
.bottom-btn .btn2 {
background-color: white;
color: black;
padding: 10px 20px;
border: solid 1px #C3C3C3;
border-radius: 4px;
margin-left: 10px;
}
.bottom-btn .btn3 {
background-color: white;
color: #C3C3C3;
padding: 10px 20px;
border: solid 1px #C3C3C3;
border-radius: 4px;
margin-left: 10px;
}
/*교환/반품 안내*/
.refund {
margin-left: 15px;
text-align: left;
overflow: hidden;
padding: 3px 20px;
}
.refund-agent {
background-color: #C3C3C3;
color: white;
padding: 10px 20px;
border: none;
border-radius: 25px;
margin-left: 10px;
}
/*채팅창 입력*/
.chat-input {
margin-bottom: 2px;
border-radius: 50px;
border: solid 2px #C3C3C3;
width: 90%;
}
.input-container {
width: 85%;
margin-top: 0px;
}
.chat-input-container {
text-align: -webkit-center;
}
.chat-sending .chat-time {
display: none;
}
/*상품 검색*/
.search-product {
color: white;
padding: 8px 20px;
border-radius: 25px;
text-decoration: none;
border: solid 1px #C3C3C3;
margin-left: 20%;
margin-right: 20%;
width: 60%;
text-align: center;
background-color: #C3C3C3;
}
댓글목록0
댓글 포인트 안내