141 lines
6.3 KiB
CSS
141 lines
6.3 KiB
CSS
.search-detail-answer {
|
|
--thumbup-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='15.5' stroke='%233366FF'/%3E%3Cpath d='M18.5 14.3333L17.6783 14.1967C17.6585 14.316 17.6649 14.4382 17.697 14.5548C17.7292 14.6714 17.7863 14.7797 17.8645 14.872C17.9427 14.9643 18.0401 15.0384 18.1498 15.0893C18.2595 15.1402 18.379 15.1666 18.5 15.1667V14.3333ZM9.33333 14.3333V13.5C9.11232 13.5 8.90036 13.5878 8.74408 13.7441C8.5878 13.9004 8.5 14.1123 8.5 14.3333H9.33333ZM11 23.5H20.4667V21.8333H11V23.5ZM21.4667 13.5H18.5V15.1667H21.4667V13.5ZM19.3225 14.47L19.9933 10.4408L18.35 10.1667L17.6783 14.1967L19.3225 14.47ZM18.35 8.5H18.1717V10.1667H18.35V8.5ZM15.3975 9.98417L13.3025 13.1292L14.6892 14.0542L16.7858 10.9092L15.3975 9.98417ZM12.6083 13.5H9.33333V15.1667H12.6083V13.5ZM8.5 14.3333V21H10.1667V14.3333H8.5ZM22.9183 21.49L23.9183 16.49L22.285 16.1633L21.285 21.1633L22.9183 21.49ZM13.3025 13.1292C13.2264 13.2433 13.1224 13.3368 13.0015 13.4015C12.8805 13.4662 12.7455 13.5 12.6083 13.5V15.1667C13.0199 15.1666 13.4251 15.065 13.7879 14.8708C14.1508 14.6766 14.4601 14.3958 14.6883 14.0533L13.3025 13.1292ZM19.9933 10.4408C20.0331 10.2021 20.0205 9.95759 19.9562 9.72426C19.892 9.49092 19.7777 9.27438 19.6213 9.08968C19.4649 8.90498 19.2702 8.75655 19.0507 8.65472C18.8311 8.55289 18.592 8.50009 18.35 8.5V10.1667L19.9933 10.4408ZM21.4667 15.1667C21.59 15.1666 21.7118 15.1939 21.8232 15.2467C21.9347 15.2994 22.0331 15.3762 22.1113 15.4715C22.1895 15.5669 22.2456 15.6784 22.2755 15.798C22.3054 15.9176 22.3092 16.0424 22.285 16.1633L23.9183 16.49C23.9908 16.1274 23.9819 15.7532 23.8924 15.3944C23.8028 15.0356 23.6347 14.7012 23.4003 14.4152C23.1659 14.1292 22.8709 13.8987 22.5367 13.7405C22.2025 13.5822 21.8373 13.5001 21.4675 13.5L21.4667 15.1667ZM20.4667 23.5C21.0447 23.5 21.6049 23.2998 22.0519 22.9333C22.4988 22.5668 22.805 22.0568 22.9183 21.49L21.285 21.1633C21.2472 21.3525 21.145 21.5226 20.9957 21.6448C20.8465 21.767 20.6595 21.8336 20.4667 21.8333V23.5ZM18.1717 8.5C17.6229 8.50001 17.0827 8.63548 16.5989 8.89438C16.1151 9.15329 15.7019 9.52763 15.3975 9.98417L16.7858 10.9092C16.938 10.6808 17.1433 10.4936 17.3852 10.364C17.6271 10.2345 17.8973 10.1667 18.1717 10.1667V8.5ZM11 21.8333C10.779 21.8333 10.567 21.7455 10.4107 21.5893C10.2545 21.433 10.1667 21.221 10.1667 21H8.5C8.5 21.663 8.76339 22.2989 9.23223 22.7678C9.70107 23.2366 10.337 23.5 11 23.5V21.8333Z' fill='%233366FF'/%3E%3Cpath d='M12.6667 14.3333V22.6666' stroke='%233366FF' stroke-width='1.66667'/%3E%3C/svg%3E%0A");
|
|
--tab-img: url("data:image/svg+xml,%3Csvg width='255' height='48' viewBox='0 0 255 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M255 48C247.082 48 239.997 43.3747 236.871 36.1799L226.244 11.8201C223.118 4.62527 216.033 0 208.114 0H14.5866C6.56398 0 0 6.47538 0 14.3897V48H255Z' fill='%23EDF1FF'/%3E%3C/svg%3E%0A");
|
|
|
|
.answer-header {
|
|
flex: 1 1 auto;
|
|
padding: 31px 40px;
|
|
background-color: #EDF1FF;
|
|
position: relative;
|
|
margin-top: 48px;
|
|
border-top-right-radius: 16px;
|
|
|
|
&:before {
|
|
content: attr(data-title);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding-left: 40px;
|
|
width: 255px;
|
|
height: 48px;
|
|
position: absolute;
|
|
top: -48px;
|
|
left: 0;
|
|
background-image: var(--tab-img);
|
|
background-repeat: no-repeat;
|
|
background-position: left;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #3366FF;
|
|
}
|
|
|
|
span {
|
|
font-size: 20px;
|
|
|
|
&.green {
|
|
color: #04AA04;
|
|
}
|
|
|
|
&.violet {
|
|
color: #9835DA;
|
|
}
|
|
|
|
&.orange {
|
|
color: #F18744;
|
|
}
|
|
|
|
&.red {
|
|
color: #D01C64;
|
|
}
|
|
|
|
&.garsian {
|
|
color: #0D98A1;
|
|
}
|
|
}
|
|
|
|
button {
|
|
max-width: 286px;
|
|
height:38px !important;
|
|
padding: 6px 12px;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
box-shadow: 0 0 0 1px #FFFFFF;
|
|
border-radius: 4px;
|
|
display: -webkit-box;
|
|
/* 표시줄수 */
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&.green {
|
|
color: #04AA04;
|
|
box-shadow: 0 0 0 1px #04AA04;
|
|
}
|
|
|
|
&.violet {
|
|
color: #9835DA;
|
|
box-shadow: 0 0 0 1px #9835DA;
|
|
}
|
|
|
|
&.orange {
|
|
color: #F18744;
|
|
box-shadow: 0 0 0 1px #F18744;
|
|
}
|
|
|
|
&.red {
|
|
color: #D01C64;
|
|
box-shadow: 0 0 0 1px #D01C64;
|
|
}
|
|
|
|
&.garsian {
|
|
color: #0D98A1;
|
|
box-shadow: 0 0 0 1px #0D98A1;
|
|
}
|
|
|
|
&.thumbsup {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 0;
|
|
padding: 0;
|
|
box-shadow: initial;
|
|
background-image: var(--thumbup-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
&.thumbsdown {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 0;
|
|
padding: 0;
|
|
box-shadow: initial;
|
|
background-image: var(--thumbup-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
transform: scaleY(-1)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.answer-body {
|
|
flex: 1 1 auto;
|
|
padding: 31px 40px;
|
|
background-color: #3366FF;
|
|
border-bottom-left-radius: 16px;
|
|
border-bottom-right-radius: 16px;
|
|
|
|
button {
|
|
padding: 6px 16px;
|
|
color: #FFFFFF;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 22.4px;
|
|
box-shadow: 0 0 0 1px #FFFFFF;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
} |