This repository has been archived on 2024-04-08. You can view files and clone it, but cannot push or open issues or pull requests.
mystic/themes/hueman/source/css/_partial/insight.styl
2018-09-03 17:41:16 +10:00

130 lines
2.7 KiB
Stylus

// Insight Search Styles
ins-container-width = 540px
ins-text-grey = #9a9a9a
ins-border-grey = #e2e2e2
ins-background-grey = #f7f7f7
ins-background-theme = color-theme
$ins-full-screen
top: 0
left: 0
margin: 0
width: 100%
height: 100%
.ins-search
display: none
&.show
display: block
.ins-selectable
cursor: pointer
.ins-search-mask,
.ins-search-container
position: fixed
.ins-search-mask
top: 0
left: 0
width: 100%
height: 100%
z-index: 100
background: rgba(0,0,0,0.5)
.ins-input-wrapper
position: relative
.ins-search-input
width: 100%
border: none
outline: none
font-size: 16px
box-shadow: none
font-weight: 200
border-radius: 0
background: white
line-height: 20px
box-sizing: border-box
padding: 12px 28px 12px 20px
border-bottom: 1px solid ins-border-grey
font-family: "Microsoft Yahei Light", "Microsoft Yahei", Helvetica, Arial, sans-serif
.ins-close
top: 50%
right: 6px
width: 20px
height: 20px
font-size: 16px
margin-top: -11px
position: absolute
text-align: center
display: inline-block
&:hover
color: ins-background-theme
.ins-search-container
left: 50%
top: 100px
z-index: 101
bottom: 100px
box-sizing: border-box
width: ins-container-width
margin-left: -(ins-container-width/2)
@media screen and (max-width: 559px), screen and (max-height: 479px)
top: 0
left: 0
margin: 0
width: 100%
height: 100%
background: ins-background-grey
.ins-section-wrapper
left: 0
right: 0
top: 45px
bottom: 0
overflow-y: auto
position: absolute
.ins-section-container
position: relative
background: ins-background-grey
.ins-section
font-size: 14px
line-height: 16px
.ins-section-header,
.ins-search-item
padding: 8px 15px
.ins-section-header
color: ins-text-grey
border-bottom: 1px solid ins-border-grey
.ins-slug
margin-left: 5px
color: ins-text-grey
&:before
content: '('
&:after
content: ')'
.ins-search-item
header,
.ins-search-preview
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
header
.fa
margin-right: 8px
.ins-search-preview
height: 15px
font-size: 12px
color: ins-text-grey
margin: 5px 0 0 20px
&:hover,
&.active
color: white
background: ins-background-theme
.ins-slug,
.ins-search-preview
color: white