hexo-theme-keep/source/css/layout/_partial/local-search.styl

173 lines
3.3 KiB
Stylus
Raw Normal View History

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