175 lines
3.3 KiB
Stylus
175 lines
3.3 KiB
Stylus
$icon-size = 1.2rem
|
|
$search-header-height = 3rem
|
|
|
|
.search-pop-overlay {
|
|
position fixed
|
|
display flex
|
|
height 100%
|
|
width 100%
|
|
left 0
|
|
top 0
|
|
background rgba(0, 0, 0, 0)
|
|
visibility hidden
|
|
z-index $z-index-8
|
|
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
|
|
|
|
&.active {
|
|
visibility visible
|
|
background rgba(0, 0, 0, 0.35)
|
|
|
|
.search-popup {
|
|
transform scale(1)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.search-popup {
|
|
background var(--background-color)
|
|
border-radius 0.4rem
|
|
height 80%
|
|
width 70%
|
|
margin auto
|
|
transform scale(0)
|
|
z-index $z-index-6
|
|
transition-t("transform", "0", "0.3", "ease")
|
|
|
|
+keep-tablet() {
|
|
width 80%
|
|
}
|
|
|
|
+keep-mobile() {
|
|
width 90%
|
|
}
|
|
|
|
.search-header {
|
|
background var(--fourth-text-color)
|
|
border-top-left-radius 0.2rem
|
|
border-top-right-radius 0.2rem
|
|
display flex
|
|
height $search-header-height
|
|
align-items center
|
|
padding 0 1rem
|
|
|
|
.search-input-field-pre {
|
|
cursor pointer
|
|
color var(--default-text-color)
|
|
margin-right 0.2rem
|
|
}
|
|
|
|
.search-input-container {
|
|
flex-grow 1
|
|
padding 0.2rem
|
|
|
|
.search-input {
|
|
background transparent
|
|
border 0
|
|
outline 0
|
|
width 100%
|
|
font-size 1.2rem
|
|
color var(--default-text-color)
|
|
|
|
&::-webkit-search-cancel-button {
|
|
display none
|
|
}
|
|
|
|
&::-webkit-input-placeholder {
|
|
color var(--third-text-color)
|
|
font-size 1rem
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.close-popup-btn {
|
|
color var(--default-text-color)
|
|
font-size $icon-size
|
|
cursor pointer
|
|
|
|
&:hover .fas, far, fab {
|
|
color var(--first-text-color)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
#search-result {
|
|
position relative
|
|
box-sizing border-box
|
|
display flex
|
|
height 'calc(100% - %s)' % $search-header-height
|
|
overflow auto
|
|
padding 0.3rem 1.5rem
|
|
|
|
.search-result-list {
|
|
width 100%
|
|
height 100%
|
|
font-size 1rem
|
|
|
|
li {
|
|
box-sizing border-box
|
|
border-bottom 0.1rem dashed var(--border-color)
|
|
padding 0.8rem 0
|
|
margin 0.8rem 0
|
|
|
|
&:last-child {
|
|
border-bottom none
|
|
}
|
|
|
|
|
|
.search-result-title {
|
|
position relative
|
|
font-weight bold
|
|
margin-bottom 0.8rem
|
|
padding-left 1rem
|
|
display flex
|
|
align-items center
|
|
|
|
&::after {
|
|
content ''
|
|
position absolute
|
|
width 0.4rem
|
|
height 0.4rem
|
|
border-radius 50%
|
|
top 50%
|
|
transform translateY(-50%)
|
|
left 0
|
|
background var(--default-text-color)
|
|
}
|
|
}
|
|
|
|
|
|
.search-result {
|
|
line-height 2rem
|
|
margin 0
|
|
padding-left 1rem
|
|
word-wrap break-word
|
|
}
|
|
|
|
a {
|
|
&:hover {
|
|
color var(--default-text-color)
|
|
}
|
|
}
|
|
|
|
.search-keyword {
|
|
border-bottom 0.1rem dashed var(--primary-color)
|
|
color var(--primary-color)
|
|
font-weight bold
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
#no-result {
|
|
color var(--third-text-color)
|
|
margin auto
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|