molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
vdoing/styles/arrow.styl Normal file
View File

@@ -0,0 +1,22 @@
@require './config'
.arrow
display inline-block
width 0
height 0
&.up
border-left 4px solid transparent
border-right 4px solid transparent
border-bottom 6px solid $arrowBgColor
&.down
border-left 4px solid transparent
border-right 4px solid transparent
border-top 6px solid $arrowBgColor
&.right
border-top 4px solid transparent
border-bottom 4px solid transparent
border-left 6px solid $arrowBgColor
&.left
border-top 4px solid transparent
border-bottom 4px solid transparent
border-right 6px solid $arrowBgColor

274
vdoing/styles/code-theme.styl Normal file
View File

@@ -0,0 +1,274 @@
// 适合浅色背景 //@import '~prismjs/themes/prism.css'
codeThemeLight()
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
// 行高亮颜色
div[class*="language-"]
.highlight-lines
.highlighted
background-color rgba(200, 200, 200, 40%)
&.line-numbers-mode
.highlight-lines .highlighted
&:before
background-color rgba(200, 200, 200, 40%)
// 适合深色背景 // @import '~prismjs/themes/prism-tomorrow.css'
codeThemeDark()
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: none;
text-shadow: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2d2d2d;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
background: none;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}

142
vdoing/styles/code.styl Normal file
View File

@@ -0,0 +1,142 @@
body {$contentClass}
code
color var(--textLightenColor)
padding 0.25rem 0.5rem
margin 0
font-size 0.9em
// background-color rgba(27,31,35,0.05)
background-color rgba(100,100,100,0.08)
border-radius 3px
.token
&.deleted
color #EC5975
&.inserted
color $accentColor
body {$contentClass}
pre, pre[class*="language-"]
line-height 1.4
padding 1.25rem 1.5rem
margin 0.85rem 0
background-color $codeBgColor
border-radius 6px
overflow auto
code
// color #fff
color var(--codeColor)
padding 0
background-color transparent
border-radius 0
div[class*="language-"]
position relative
// background-color $codeBgColor
background-color var(--codeBg)
border-radius 6px
.highlight-lines
user-select none
padding-top 1.3rem
position absolute
top 0
left 0
width 100%
line-height 1.4
.highlighted
background-color rgba(0, 0, 0, 30%)
pre, pre[class*="language-"]
background transparent
position relative !important
z-index 1
&::before
position absolute
z-index 3
top 0.8em
right 1em
font-size 0.8rem
color rgba(150,150,150,.7)
// color rgba(255, 255, 255, 0.4)
&:not(.line-numbers-mode)
.line-numbers-wrapper
display none
&.line-numbers-mode
.highlight-lines .highlighted
position relative
&:before
content ' '
position absolute
z-index 3
left 0
top 0
display block
width $lineNumbersWrapperWidth
height 100%
background-color rgba(0, 0, 0, 30%)
pre
padding-left $lineNumbersWrapperWidth + 1 rem
vertical-align middle
.line-numbers-wrapper
position absolute
top 0
width $lineNumbersWrapperWidth
text-align center
// color rgba(255, 255, 255, 0.3)
color rgba(127, 127, 127, .5)
padding 1.25rem 0
line-height 1.4
br
user-select none
.line-number
position relative
z-index 4
user-select none
font-size 0.85em
&::after
content ''
position absolute
z-index 2
top 0
left 0
width $lineNumbersWrapperWidth
height 100%
border-radius 6px 0 0 6px
// border-right 1px solid rgba(0, 0, 0, 66%)
// background-color $codeBgColor
border-right 1px solid var(--borderColor)
background-color var(--codeBg)
for lang in $codeLang
div{'[class~="language-' + lang + '"]'}
&:before
content ('' + lang)
div[class~="language-javascript"]
&:before
content "js"
div[class~="language-typescript"]
&:before
content "ts"
div[class~="language-markup"]
&:before
content "html"
div[class~="language-markdown"]
&:before
content "md"
div[class~="language-json"]:before
content "json"
div[class~="language-ruby"]:before
content "rb"
div[class~="language-python"]:before
content "py"
div[class~="language-bash"]:before
content "sh"
div[class~="language-php"]:before
content "php"

1
vdoing/styles/config.styl Normal file
View File

@@ -0,0 +1 @@
$contentClass = '.theme-vdoing-content'

87
vdoing/styles/custom-blocks.styl Normal file
View File

@@ -0,0 +1,87 @@
.custom-block
.custom-block-title
font-weight 600
margin-bottom .2rem
p
margin 0
&.tip, &.warning, &.danger, &.note
padding .5rem 1.5rem
border-left-width .5rem
border-left-style solid
margin 1rem 0
&.tip
background-color #f3f5f7
border-color #42b983
color darken(#42b983, 50%)
&.warning
background-color #FFF7D0
border-color darken(#ffe564, 35%)
color darken(#ffe564, 70%)
.custom-block-title
color darken(#ffe564, 50%)
a
color var(--textColor)
&.danger
background-color #ffe6e6
border-color darken(red, 20%)
color darken(red, 70%)
.custom-block-title
color darken(red, 40%)
a
color var(--textColor)
&.note
background-color #E8F5FA
border-color #157BAE
color darken(#157BAE, 40%)
&.right
color var(--textColor)
font-size 0.9rem
text-align right
&.theorem
margin 1rem 0
padding .8rem 1.5rem
border-radius 2px
background-color var(--customBlockBg)
.title
font-weight bold
margin .5rem 0
&.details
display block
position relative
border-radius 2px
margin 1em 0
padding 1.6em
background-color var(--customBlockBg)
p
margin .8rem 0
h4
margin-top 0
figure, p
&:last-child
margin-bottom 0
padding-bottom 0
summary
outline none
cursor pointer
&:hover
color $accentColor
// 深色模式适配
.theme-mode-dark
.custom-block
&.warning
background-color rgba(255, 247, 208, .2)
color darken(#ffe564, 35%)
.custom-block-title
color darken(#ffe564, 15%)
&.tip
background-color rgba(243, 245, 247, .2)
color darken(#42b983, 0%)
&.danger
background-color rgba(255, 230, 230, .4)
color darken(red, 50%)
a
color $accentColor
&.note
background-color rgba(243, 245, 247, .2)
color darken(#157BAE, 0%)

318
vdoing/styles/index.styl Normal file
View File

@@ -0,0 +1,318 @@
// 引入字体图标
@import '//at.alicdn.com/t/font_1678482_4tbhmh589x.css'
@require './config'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
@require './markdown-container'
html, body
padding 0
margin 0
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
-webkit-tap-highlight-color transparent
font-size 16px
color $textColor
background var(--bodyBg)
// 去掉黄色边框
a,input,button
outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
// 滚动条样式
@media (min-width: $MQMobile)
::-webkit-scrollbar
width:6px;
height:5px;
::-webkit-scrollbar-track-piece
background-color:rgba(0,0,0,.15)
-webkit-border-radius:3px
::-webkit-scrollbar-thumb:vertical
height:5px;
background-color:rgba(0,0,0,.28)
-webkit-border-radius:3px
::-webkit-scrollbar-thumb:horizontal
width:5px;
background-color:rgba(0,0,0,.28)
-webkit-border-radius:3px
.card-box // 卡片
border-radius 5px
background var(--mainBg)
box-shadow 0px 0px 4px 0 rgba(0,0,0,.1)
transition box-shadow .5s
&:hover
box-shadow 0 1px 15px 0 rgba(0,0,0,.1)
.theme-style-line
@media (max-width: 719px)
margin-left: -1px;
margin-right: -1px;
.card-box
box-shadow 0 0
border: 1px solid var(--borderColor)
.blur // 模糊滤镜
backdrop-filter saturate(200%) blur(20px)
.custom-page // 自定义页面
min-height calc(100vh - 3.6rem)
padding-top $navbarHeight
padding-bottom .9rem
.theme-vdoing-wrapper
margin 0 auto
// 默认的搜索框样式重置
body .search-box
input
background-color transparent
color var(--textColor)
border 1px solid var(--borderColor, #ccc)
@media (max-width: $MQNarrow)
border-color transparent
.page
transition padding .2s ease
padding-left .8rem
.navbar
position fixed
z-index 20
top 0
left 0
right 0
height $navbarHeight
background-color var(--blurBg)
box-sizing border-box
box-shadow 0 2px 5px rgba(0,0,0,.06)
.sidebar-mask
position fixed
z-index 12
top 0
left 0
width 100vw
height 100vh
display none
.sidebar-hover-trigger
display none
position: fixed
z-index 12
top ($navbarHeight + 4.5rem)
left 0
bottom 0
width 24px
.sidebar
font-size 16px
background-color var(--sidebarBg)
width $sidebarWidth
position fixed
z-index 13
margin 0
top $navbarHeight
left 0
bottom 0
box-sizing border-box
border-right 1px solid var(--borderColor)
overflow-y auto
transform translateX(-100%)
transition transform .2s
@media (max-width: $MQMobile)
background-color var(--mainBg)
{$contentClass}:not(.custom)
word-wrap break-word
@extend $wrapper
> *:first-child
// margin-top $navbarHeight // 内容第一个元素的top距离
a:hover
text-decoration underline
p.demo
padding 1rem 1.5rem
border 1px solid #ddd
border-radius 4px
img
max-width 100%
{$contentClass}.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
opacity .75
border-left .2rem solid rgba(100,100,100,.3)
margin 1rem 0
padding .25rem 0 .25rem 1rem
& > p
margin 0
ul, ol
padding-left 1.2em
strong
font-weight 600
h1, h2, h3, h4, h5, h6
font-weight 600
line-height 1.25
{$contentClass}: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
&:focus .header-anchor,
&:hover .header-anchor
opacity: 1
// 没有h1标签时
p,pre,.custom-block
{$contentClass}:not(.custom) > &
&:first-child
margin-top 2rem
h1
font-size 1.9rem
{$contentClass}:not(.custom) > & // 页面内容的首个h1标签隐藏
&:first-child
display none
h2
font-size 1.5rem
padding-bottom .3rem
border-bottom 1px solid var(--borderColor)
h3
font-size 1.35rem
.page
h4
font-size 1.25rem
h5
font-size 1.15rem
h6
font-size 1.05rem
a.header-anchor
font-size 0.85em
float left
margin-left -0.87em
padding-right 0.23em
margin-top 0.125em
opacity 0
&:focus,
&: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 var(--borderColor)
table
border-collapse collapse
margin 1rem 0
overflow-x: auto
width 100%
display inline-table
@media (max-width: $MQMobile)
display block
tr
border-top 1px solid var(--borderColor)
&:nth-child(2n)
background-color rgba(150,150,150,0.1)
th, td
border 1px solid var(--borderColor)
padding .6em 1em
@media (max-width: $MQMobile)
padding .3em .5em
a
word-break break-all
.theme-container
// background var(--mainBg)
color var(--textColor)
min-height 100vh
&.sidebar-open
.sidebar-mask
display: block
&.no-navbar
{$contentClass}: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
padding-left 0
@require 'mobile.styl'
// 打印时的样式
@media print
.navbar,.sidebar,.buttons
display: none
.page
padding-top: 0 !important

211
vdoing/styles/markdown-container.styl Normal file
View File

@@ -0,0 +1,211 @@
// markdown容器样式
// 居中容器
.center-container
text-align: center
h1, h2, h3, h4, h5, h6
.center-container > &
margin-top (0.5rem - $navbarHeight)
padding-top ($navbarHeight + 1rem)
margin-bottom 0
a.header-anchor
float none
padding-right: 0
margin-left: -.9rem
// 普通卡片列表
.cardListContainer
margin .7rem 0
&>:not(.card-list)
display none
.card-list
margin -0.35rem
display: flex;
flex-wrap: wrap;
align-items: flex-start;
.card-item
width calc(100%/3 - .7rem)
margin .35rem
background var(--bodyBg)
border-radius 3px
color var(--textColor)
display flex
box-shadow 1px 1px 2px 0 rgba(0,0,0,.06)
transition all .4s
&:hover
text-decoration none
box-shadow: 0 10px 20px -10px var(--randomColor, rgba(0,0,0,0.15));
transform: translateY(-3px) scale(1.01, 1.01)
img
// transform rotate(8deg) scale(1.1, 1.1)
box-shadow 3px 2px 7px rgba(0, 0, 0, 0.15)
div p
text-shadow 3px 2px 5px rgba(0, 0, 0, 0.15)
img
width 60px
height 60px
border-radius 50%
border 2px solid #fff
margin 1rem
margin-right 0
box-shadow 3px 2px 5px rgba(0, 0, 0, 0.08)
transition all .4s
div
flex 1
display inline-block
float right
padding 1rem 0
p
margin 0
padding 0 1rem
transition text-shadow .4s
text-align center
.name
margin .2rem 0 .3rem 0
.desc
font-size .8rem
line-height 1.1rem
opacity .8
margin-bottom .2rem
.card-item.row-1
width calc(100% - .7rem)
img
margin-left 2rem
.card-item.row-2
width calc(100%/2 - .7rem)
img
margin-left 1.5rem
.card-item.row-3
width calc(100%/3 - .7rem)
.card-item.row-4
width calc(100%/4 - .7rem)
// 图文卡片列表
.cardImgListContainer
margin 1rem 0
&>:not(.card-list)
display none
.card-list
margin -0.5rem
display: flex;
flex-wrap: wrap;
align-items: flex-start;
.card-item
width calc(100%/3 - 1rem)
margin .5rem
background var(--mainBg)
border 1px solid rgba(0,0,0,0.1)
box-sizing: border-box
border-radius 3px
overflow hidden
color var(--textColor)
box-shadow 2px 2px 10px rgba(0,0,0,.04)
display flex
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
transition: all .4s
&:hover
box-shadow 1px 1px 20px rgba(0,0,0,.1)
transform: translateY(-3px)
.box-img
overflow hidden
position relative
background #eee
img
display block
width 100%
height 100%
transition: all .3s
// &:hover
// img
// transform: scale(1.1, 1.1)
// opacity .75
a
color var(--textColor)
transition: color .3s
&:hover
// color $accentColor
text-decoration none
.box-info
padding: .8rem 1rem
p
margin 0
.desc
margin-top: .3rem
opacity .8
font-size: .9rem
line-height: 1.1rem
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
.box-footer
overflow hidden
padding: .8rem 1rem
border-top: 1px solid rgba(0,0,0,0.1)
img
width 1.8rem
height 1.8rem
border-radius 50%
float left
span
line-height 1.8rem
float left
margin-left: .6rem
font-size: .8rem
.card-item.row-1
width calc(100% - 1rem)
.card-item.row-2
width calc(100%/2 - 1rem)
.card-item.row-3
width calc(100%/3 - 1rem)
.card-item.row-4
width calc(100%/4 - 1rem)
.theme-mode-dark
.cardImgListContainer
.card-list
.card-item
border-color: var(--borderColor)
.box-footer
border-color: var(--borderColor)
// 卡片列表的响应
@media (max-width: 900px)
.cardListContainer
.card-list
.card-item.row-4
width calc(100%/3 - .7rem)
.cardImgListContainer
.card-list
.card-item.row-4
width calc(100%/3 - 1rem)
@media (max-width: 720px)
.cardListContainer
.card-list
.card-item.row-3, .card-item.row-4
width calc(100%/2 - .7rem)
img
margin-left 1.5rem
.cardImgListContainer
.card-list
.card-item.row-3, .card-item.row-4
width calc(100%/2 - 1rem)
@media (max-width: 500px)
.cardListContainer
.card-list
.card-item.row-1, .card-item.row-2, .card-item.row-3, .card-item.row-4
width calc(100% - .7rem)
img
margin-left 1.5rem
.cardImgListContainer
.card-list
.card-item.row-1, .card-item.row-2, .card-item.row-3, .card-item.row-4
width calc(100% - 1rem)

101
vdoing/styles/mobile.styl Normal file
View File

@@ -0,0 +1,101 @@
@require './config'
$mobileSidebarWidth = $sidebarWidth * 0.9
// narrow desktop / iPad
@media (max-width: $MQNarrow)
.sidebar
font-size 15px
@media (max-width: $MQMobile)
.sidebar
width $sidebarWidth * 0.95
@media (min-width: ($MQMobile + 1px)) and (max-width: $MQNarrow)
.sidebar
width $mobileSidebarWidth
.theme-container
&.sidebar-open
.page
padding-left ($mobileSidebarWidth + .8rem)!important
// wide mobile
@media (max-width: $MQMobile)
.sidebar
top 0
height 100vh
padding-top $navbarHeight
transform translateX(-100%)
transition transform .2s ease
.page
padding-left 0
.theme-container
&.sidebar-open
.sidebar
transform translateX(0)
.sidebar-mask // 蒙版在小屏中才能显示
display block
&.no-navbar
.sidebar
padding-top: 0
// narrow mobile
@media (max-width: $MQMobileNarrow)
h1
font-size 1.9rem
{$contentClass}
div[class*="language-"]
margin 0.85rem -1.5rem
border-radius 0
// 侧边栏显示隐藏的适配
@media (min-width: ($MQMobile + 1px)) // 720px
.theme-container
.sidebar-hover-trigger
display: block
.sidebar-hover-trigger:hover ~ .sidebar
transform translateX(0)
z-index: 100
&:not(.sidebar-open)
.sidebar-hover-trigger ~ .sidebar:hover
transform translateX(0)
z-index: 100
&.sidebar-open
.sidebar-mask
display: none
.sidebar
transform translateX(0)
.sidebar-button
left $sidebarWidth
.page
padding-left ($sidebarWidth + .8rem)
padding-right .8rem
.sidebar-hover-trigger
display: none
&.have-rightmenu
.page
padding-right ($rightMenuWidth + 20rem)
&.no-sidebar
.page
padding-left 0!important
.sidebar-hover-trigger
display: none
&.hide-navbar
.sidebar-hover-trigger
top 4.5rem
.sidebar
top 0
@media (max-width: $MQNarrow)
.theme-container
&.sidebar-open:not(.on-sidebar)
.sidebar-button
$mobileSidebarWidth = $sidebarWidth * 0.7
left $mobileSidebarWidth
.theme-container.no-sidebar
.sidebar-button
display none

96
vdoing/styles/palette.styl Normal file
View File

@@ -0,0 +1,96 @@
// 主题调色板
// 原主题预设变量
// 颜色
// $accentColor = #3eaf7c
// $textColor = #2c3e50
// $borderColor = #eaecef
// $codeBgColor = #282c34
// $arrowBgColor = #ccc
// $badgeTipColor = #42b983
// $badgeWarningColor = darken(#ffe564, 35%)
// $badgeErrorColor = #DA5961
// 布局
// $navbarHeight = 3.6rem
// $sidebarWidth = 20rem
// $contentWidth = 740px
// $homePageWidth = 960px
// 代码块
// $lineNumbersWrapperWidth = 3.5rem
@require './code-theme'
//***vdoing主题-变量***//
// 颜色
$bannerTextColor = #fff // 首页banner区(博客标题)文本颜色
$accentColor = #11A8CD
$activeColor = #ff5722
$arrowBgColor = #ccc
// 放弃使用
// $badgeTipColor = #42b983
// $badgeWarningColor = darken(#ffe564, 35%)
// $badgeErrorColor = #DA5961
// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 860px
$homePageWidth = 1100px
$rightMenuWidth = 425px // 右侧菜单
// 代码块
$lineNumbersWrapperWidth = 2.5rem
// 浅色模式
.theme-mode-light
--bodyBg: #f4f4f4
--mainBg: rgba(255,255,255,1)
--sidebarBg: rgba(255,255,255,.8)
--blurBg: rgba(255,255,255,.9)
--customBlockBg: #f1f1f1
--textColor: #00323c
--textLightenColor: #0085AD
--borderColor: rgba(0,0,0,.12)
--codeBg: #f6f6f6
--codeColor: #525252
codeThemeLight()
// 深色模式
.theme-mode-dark
--bodyBg: rgb(39,39,43)
--mainBg: rgba(30,30,34,1)
--sidebarBg: rgba(30,30,34,.8)
--blurBg: rgba(30,30,34,.8)
--customBlockBg: rgb(39,39,43)
--textColor: rgb(155,155,170)
--textLightenColor: #0085AD
// --borderColor: #2C2C3A
--borderColor: #30363d
--codeBg: #252526
--codeColor: #fff
codeThemeDark()
// 阅读模式
.theme-mode-read
--bodyBg: rgb(236,236,204)
--mainBg: rgba(245,245,213,1)
--sidebarBg: rgba(245,245,213,.8)
--blurBg: rgba(245,245,213,.9)
--customBlockBg: rgb(236,236,204)
--textColor: #704214
--textLightenColor: #996633
--borderColor: rgba(0,0,0,.15)
--codeBg: #282c34
--codeColor: #fff
codeThemeDark()
// 背景色整体一致
.theme-style-line.theme-mode-light
--bodyBg: rgba(255,255,255,1)
.theme-style-line.theme-mode-dark
--bodyBg: rgba(30,30,34,1)
.theme-style-line.theme-mode-read
--bodyBg: rgba(245,245,213,1)

3
vdoing/styles/toc.styl Normal file
View File

@@ -0,0 +1,3 @@
.table-of-contents
.badge
vertical-align middle

17
vdoing/styles/wrapper.styl Normal file
View File

@@ -0,0 +1,17 @@
$vdoing-wrapper
max-width $contentWidth
margin 0 auto
padding 1rem 2.5rem 2rem 2.5rem
&:not(.footer)
background var(--mainBg)
box-shadow 0 1px 2px 0 rgba(0,0,0,.1)
// box-shadow 0 0 3px 0 rgba(0,0,0,.1)
margin-bottom 1rem
@media (min-width $contentWidth + 80)
border-radius 2px
@media (max-width: $MQNarrow)
padding 1rem 2rem
@media (max-width: $MQMobileNarrow)
padding 1rem 1.5rem
$wrapper
max-width $contentWidth