:root {
--primary-color: #FF5460;
--secondary-color: #FF9D84;
--tertiary-color: #F0E797;
--quaternary-color: #75B08A;
--highlight-color: #FFFDD0;
--colorGray: #c7c7c7;
--loader-size: 15px;
--loader-animation-duration: 2s;
--loader-animation-delay: 150ms;
}
.post-search-result {
position: absolute;
top: 80%;
left: -20px;
right: -20px;
background-color: #ffffff;
z-index: 99;
border-radius: 10px;
padding: 40px 20px 20px 20px;
box-shadow: 1px 1px 5px 0 rgba(0,0,0,.1);
line-break: auto;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.btn-reset {
background-color: var(--primary-color);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-width: 50px;
cursor: pointer;
margin-left: 15px;
}
.search-result-excerpt {
font-size: 14px;
line-height: 1.15;
}
.highlight {
display: inline-block;
background-color: var(--highlight-color);
}
.loader-circle {
width: var(--loader-size);
height: var(--loader-size);
position: absolute;
background-color: #ccc;
top: 45%;
border-radius: 50%;
animation: move var(--loader-animation-duration) infinite cubic-bezier(.2,.64,.81,.23);
}
.loader-circle:nth-child(1) {
background-color: var(--primary-color);
}
.loader-circle:nth-child(2) {
background-color: var(--secondary-color);
animation-delay: var(--loader-animation-delay);
}
.loader-circle:nth-child(3) {
background-color: var(--tertiary-color);
animation-delay: calc(var(--loader-animation-delay) * 2);
}
.loader-circle:nth-child(4) {
background-color: var(--quaternary-color);
animation-delay: calc(var(--loader-animation-delay) * 3);
}
@keyframes move {
0% {left: 0%;}
100% {left:100%;}
}
.search-result-delimeter {
position: relative;
height: 2px;
background-color: var(--colorGray);
margin-bottom: 20px;
}
.search-result-delimeter-text {
color: #c0c0c0;
font-size: 12px;
background-color: #ffffff;
padding: 5px 25px;
border-radius: 4px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}