vuepress-theme-reco/styles/theme.styl
2019-01-29 13:57:19 +08:00

233 lines
4.2 KiB
Stylus

@require './config'
@require './nprogress'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
// @require './common'
@require '../fonts/iconfont.css'
html, body
padding 0
margin 0
-moz-user-select:none;/**/
-webkit-user-select:none;/*webkit*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/**/
user-select:none;
background-color: $bgColor
overflow-x: hidden
body
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 16px
color $textColor
input
background-color: $bgColor
-webkit-appearance: none;
.page
padding-left $sidebarWidth
.navbar
position fixed
z-index 20
top 0
left 0
right 0
height $navbarHeight
background-color $bgColor
box-sizing border-box
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28)
.sidebar-mask
position fixed
z-index 9
top 0
left 0
width 100vw
height 100vh
display none
background-color $accentColor
opacity .85
// background-color: rgba(0, 0, 0, .7)
.sidebar
font-size 15px
background-color $bgColor
width $sidebarWidth
position fixed
z-index 10
margin 0
top $navbarHeight
left 0
bottom 0
box-sizing border-box
border-right 1px solid $borderColor
overflow-y auto
.content:not(.custom)
@extend $wrapper
> *:first-child
margin-top 1rem
a:hover
text-decoration underline
p.demo
padding 1rem 1.5rem
border 1px solid #ddd
border-radius 4px
img
max-width 100%
.content.custom
padding 0
margin 0
img
max-width 100%
a
font-weight 500
color $accentColor
text-decoration none
p a code
font-weight 400
color $accentColor
kbd
background #eee
border solid 0.15rem #ddd
border-bottom solid 0.25rem #ddd
border-radius 0.15rem
padding 0 0.15em
blockquote
font-size 1rem
color #999
border-left .25rem solid #dfe2e5
margin-left 0
padding-left 1rem
ul, ol
padding-left 1.2em
strong
font-weight 600
h1, h2, h3, h4, h5, h6
font-weight 600
line-height 1.25
.content:not(.custom) > &
margin-top (0.5rem - $navbarHeight)
padding-top ($navbarHeight + 1rem)
margin-bottom 0
&:first-child
margin-top -1.5rem
margin-bottom 1rem
+ p, + pre, + .custom-block
margin-top 2rem
&:hover .header-anchor
opacity: 1
h1
font-size 2.2rem
h2
font-size 1.65rem
padding-bottom .3rem
border-bottom 1px solid $borderColor
h3
font-size 1.35rem
a.header-anchor
font-size 0.85em
float left
margin-left -0.87em
padding-right 0.23em
margin-top 0.125em
opacity 0
&:hover
text-decoration none
code, kbd, .line-number
font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
p, ul, ol
line-height 1.7
hr
border 0
border-top 1px solid $borderColor
table
border-collapse collapse
margin 1rem 0
display: block
overflow-x: auto
tr
border-top 1px solid #dfe2e5
&:nth-child(2n)
background-color #f6f8fa
th, td
border 1px solid #dfe2e5
padding .6em 1em
.custom-layout
padding-top $navbarHeight
.theme-container
&.sidebar-open
.sidebar-mask
display: block
&.no-navbar
.content:not(.custom) > h1, h2, h3, h4, h5, h6
margin-top 1.5rem
padding-top 0
.sidebar
top 0
.custom-layout
padding-top 0
.iconfont
font-size: 0.9rem;
color: #999;
// &:not(:first-child)
// margin-left: 1rem
// span
// margin-left: .5rem
/************** **************/
::-webkit-scrollbar
width: 5px;
height: 5px;
::-webkit-scrollbar-track-piece
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
::-webkit-scrollbar-thumb:vertical
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
::-webkit-scrollbar-thumb:horizontal
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
@media (min-width: ($MQMobile + 1px))
.theme-container.no-sidebar
.sidebar
display none
.page
padding-left 0
@require './mobile.styl'