meface/docs/.vuepress/theme/styles/theme.styl

353 lines
5.8 KiB
Stylus

@require './mode'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
html, body
padding 0
margin 0
body
font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
//font-family 'fangsong'
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 15px
color var(--text-color)
background-color var(--background-color)
.page, .password-wrapper-in
overflow-x: hidden
margin-left $sidebarWidth
.navbar
position fixed
z-index 20
top 0
left 0
right 0
height $navbarHeight
box-sizing border-box
box-shadow none
.sidebar-mask
position fixed
z-index 9
top 0
left 0
width 100vw
height 100vh
display none
background-color: rgba(0,0,0,.65);
.sidebar
font-size 16px
background-color var(--background-color)
width $sidebarWidth
position fixed
z-index 10
margin 0
top $navbarHeight
left 0
bottom 0
box-sizing border-box
border-right 1px solid var(--border-color)
overflow-y auto
.content__default:not(.custom)
@extend $wrapper
a:hover
text-decoration underline
p.demo
padding 1rem 1.5rem
border 1px solid #ddd
border-radius 4px
img
max-width 100%
*:first-child
margin-top 0
.content__default.custom
padding 0
margin 0
img
max-width 100%
.content__default p > img:only-child{
display: block;
margin: auto;
}
.abstract
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 .9rem
// color #999
// border-left .25rem solid #999
// background-color var(--code-color)
// margin 0.5rem 0
// padding .25rem 0 .25rem 1rem
// & > p
// margin 0
blockquote {
border-left: 4px solid #42b983;
padding: 10px 15px;
color: #777;
background-color: rgba(66, 185, 131, .1);
margin 0
}
strong
font-weight 600
//
//h1, h2, h3, h4, h5, h6
// font-weight 500
// line-height 1.25
// .content__default:not(.custom) > &
// margin-top (2.1rem - $navbarHeight)
// padding-top $navbarHeight
// margin-bottom 1rem
// &:first-child
// margin-top -3.5rem
//
//h1
// display none
// font-size 1.6rem
// &.title
// display block
//
//h2
// position relative
// padding-left 0.8rem
// font-size 1.4rem
// &::before
// position: absolute
// left 0
// bottom 0
// display: block
// height 1.8rem
// content: ''
// border-left 5px solid $accentColor
//
//h3
// font-size 1.2rem
//vue start
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
margin-top: 1rem;
margin-bottom: 1rem;
font-weight: bold;
line-height: 1.4;
cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
text-decoration: none;
}
h1 tt,
h1 code {
font-size: inherit !important;
}
h2 tt,
h2 code {
font-size: inherit !important;
}
h3 tt,
h3 code {
font-size: inherit !important;
}
h4 tt,
h4 code {
font-size: inherit !important;
}
h5 tt,
h5 code {
font-size: inherit !important;
}
h6 tt,
h6 code {
font-size: inherit !important;
}
h2 a,
h3 a {
color: #34495e;
}
h1 {
padding-bottom: .4rem;
font-size: 2.2rem;
line-height: 1.3;
}
h2 {
font-size: 1.75rem;
line-height: 1.225;
margin: 35px 0 15px;
padding-bottom: 0.5em;
border-bottom: 1px solid #ddd;
}
h3 {
font-size: 1.4rem;
line-height: 1.43;
margin: 20px 0 7px;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 1rem;
color: #777;
}
h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
margin-top: 0;
}
//vue end
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 2.2
word-wrap: break-word
hr
border 0
border-top 1px solid var(--border-color)
table
border-collapse collapse
margin 1rem 0
display: block
overflow-x: auto
tr
border-top 1px solid var(--border-color)
&:nth-child(2n)
background-color var(--code-color)
th, td
border 1px solid var(--border-color)
padding .6em 1em
.theme-container
&.sidebar-open
.sidebar-mask
display: block
&.no-navbar
.content__default:not(.custom) > h1, h2, h3, h4, h5, h6
margin-top 1.5rem
padding-top 0
.sidebar
top 0
@media (min-width: ($MQMobile + 1px))
.theme-container.no-sidebar
.sidebar
display none
.page, .password-wrapper-in
margin-left 0
@require 'mobile.styl'
.iconfont
font-family: "iconfont",Ubuntu,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important
font-size: 13px;
color: var(--text-color-sub);
/************** **************/
::-webkit-scrollbar
width: 5px;
height: 5px;
::-webkit-scrollbar-track-piece
// background-color: rgba(0, 0, 0, 0.2);
::-webkit-scrollbar-thumb:vertical
height: 5px;
background-color: $accentColor;
::-webkit-scrollbar-thumb:horizontal
width: 5px;
background-color: $accentColor;
/************** **************/
.vuepress-flowchart
overflow: auto
/************** SW-Update Popup **************/
.sw-update-popup
border-radius: $borderRadius!important;
box-shadow: var(--box-shadow)!important;
color: var(--text-color)!important;
background: var(--background-color)!important;
border: none!important;
> button
background: $accentColor;
border-radius: $borderRadius;
color: #fff;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0)
border: none;