[opt] custom css
This commit is contained in:
parent
725ab8db8e
commit
e4f6ac690a
15
_config.yml
15
_config.yml
|
@ -197,9 +197,10 @@ footer:
|
||||||
|
|
||||||
######## Tag Plugins ########
|
######## Tag Plugins ########
|
||||||
tag_plugins:
|
tag_plugins:
|
||||||
# {% note text %}
|
# {% ablock %} / {% note %}
|
||||||
note:
|
note:
|
||||||
default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
|
default_color: '' # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
|
||||||
|
border: true # true / false
|
||||||
# {% checkbox %}
|
# {% checkbox %}
|
||||||
checkbox:
|
checkbox:
|
||||||
interactive: false # enable interactive for user
|
interactive: false # enable interactive for user
|
||||||
|
@ -319,12 +320,22 @@ plugins:
|
||||||
style:
|
style:
|
||||||
darkmode: auto # auto / always / false
|
darkmode: auto # auto / always / false
|
||||||
smooth_scroll: true # true / false
|
smooth_scroll: true # true / false
|
||||||
font-size: 16px
|
font-size:
|
||||||
|
root: 16px
|
||||||
|
body: .9375rem # 15px
|
||||||
|
code: 85% # 14px
|
||||||
|
codeblock: 0.8125rem # 13px
|
||||||
font-family:
|
font-family:
|
||||||
logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
|
logo: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
|
||||||
body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
|
body: 'system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
|
||||||
code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
|
code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
|
||||||
|
codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
|
||||||
text-align: left
|
text-align: left
|
||||||
|
border-radius:
|
||||||
|
card: 12px
|
||||||
|
block: 12px
|
||||||
|
button: 8px
|
||||||
|
image: 8px
|
||||||
color:
|
color:
|
||||||
# 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可)
|
# 动态颜色(会根据明暗主题重设明度值,只用关心色相和饱和度即可)
|
||||||
background: 'hsl(212 16% 98%)' # 浅色背景颜色
|
background: 'hsl(212 16% 98%)' # 浅色背景颜色
|
||||||
|
|
|
@ -39,11 +39,11 @@ module.exports = ctx => function(args, content = '') {
|
||||||
const abbr = tabName + ' ' + ++tabId
|
const abbr = tabName + ' ' + ++tabId
|
||||||
const href = abbr.toLowerCase().split(' ').join('-')
|
const href = abbr.toLowerCase().split(' ').join('-')
|
||||||
const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
|
const isActive = (tabActive > 0 && tabActive === tabId) || (tabActive === 0 && tabId === 1) ? ' active' : ''
|
||||||
tabNav += `<li class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></li>`
|
tabNav += `<div class="tab${isActive}"><a href="#${href}">${tab.header || abbr}</a></div>`
|
||||||
tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
|
tabContent += `<div class="tab-pane${isActive}" id="${href}">${content}</div>`
|
||||||
})
|
})
|
||||||
|
|
||||||
tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
|
tabNav = `<div class="nav-tabs">${tabNav}</div>`
|
||||||
tabContent = `<div class="tab-content">${tabContent}</div>`
|
tabContent = `<div class="tab-content">${tabContent}</div>`
|
||||||
|
|
||||||
var el = ''
|
var el = ''
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
pre
|
pre
|
||||||
font-family: $ff-code
|
font-family: $ff-codeblock
|
||||||
font-size: $fs-code
|
font-size: $fs-codeblock
|
||||||
tab-size: 4
|
tab-size: 4
|
||||||
-moz-tab-size: 4
|
-moz-tab-size: 4
|
||||||
-o-tab-size: 4
|
-o-tab-size: 4
|
||||||
|
|
|
@ -2,9 +2,9 @@ blockquote
|
||||||
display: block
|
display: block
|
||||||
margin-left: 0
|
margin-left: 0
|
||||||
margin-right: 0
|
margin-right: 0
|
||||||
padding: 0.5rem 0.75rem
|
padding: 0.25rem 0.75rem
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
$bd-left = 4px
|
$bd-left = 4px
|
||||||
border-left: $bd-left solid var(--text-meta)
|
border-left: $bd-left solid var(--text-meta)
|
||||||
border-radius: $bd-left $border-block $border-block $bd-left
|
border-radius: $bd-left $border-button $border-button $bd-left
|
||||||
color: var(--text-p2)
|
color: var(--text-p2)
|
|
@ -4,7 +4,7 @@ code
|
||||||
font-family: $ff-code
|
font-family: $ff-code
|
||||||
|
|
||||||
p>code:not([class]),li>code:not([class])
|
p>code:not([class]),li>code:not([class])
|
||||||
font-size: 85%
|
font-size: $fs-code
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
padding: .2em
|
padding: .2em
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
|
@ -16,7 +16,7 @@ p>code:not([class]),li>code:not([class])
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
font-family: $ff-code
|
font-family: $ff-codeblock
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
@media screen and (min-width: $device-mobile)
|
@media screen and (min-width: $device-mobile)
|
||||||
min-width: 180px
|
min-width: 180px
|
||||||
|
@ -27,15 +27,16 @@ p>code:not([class]),li>code:not([class])
|
||||||
display: block
|
display: block
|
||||||
figcaption
|
figcaption
|
||||||
color: var(--text-p2)
|
color: var(--text-p2)
|
||||||
font-size: $fs-code
|
font-size: $fs-codeblock
|
||||||
padding: 4px 0.5rem
|
font-weight: 500
|
||||||
position: sticky
|
margin-left: 0.5rem
|
||||||
left: 0
|
display: inline-block
|
||||||
background: var(--block-hover)
|
|
||||||
border-top-left-radius: "calc(%s - 1px)" % $border-block
|
|
||||||
border-top-right-radius: "calc(%s - 1px)" % $border-block
|
|
||||||
span
|
span
|
||||||
margin-right: 4px
|
padding: 4px 0.5rem
|
||||||
|
display: block
|
||||||
|
border-bottom-left-radius: $border-button
|
||||||
|
border-bottom-right-radius: $border-button
|
||||||
|
background: var(--block-hover)
|
||||||
>table
|
>table
|
||||||
overflow: auto
|
overflow: auto
|
||||||
display: block
|
display: block
|
||||||
|
|
|
@ -20,7 +20,8 @@ $color-text = convert(hexo-config('style.color.text'))
|
||||||
// font-style: normal
|
// font-style: normal
|
||||||
|
|
||||||
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
|
$ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
|
||||||
$ff-code = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
|
$ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
|
||||||
|
$ff-code = $ff-codeblock
|
||||||
$ff-logo = $ff-body
|
$ff-logo = $ff-body
|
||||||
|
|
||||||
if hexo-config('style.font-family.body')
|
if hexo-config('style.font-family.body')
|
||||||
|
@ -29,12 +30,15 @@ if hexo-config('style.font-family.body')
|
||||||
if hexo-config('style.font-family.code')
|
if hexo-config('style.font-family.code')
|
||||||
$ff-code = convert(hexo-config('style.font-family.code'))
|
$ff-code = convert(hexo-config('style.font-family.code'))
|
||||||
|
|
||||||
|
if hexo-config('style.font-family.codeblock')
|
||||||
|
$ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
|
||||||
|
|
||||||
if hexo-config('style.font-family.logo')
|
if hexo-config('style.font-family.logo')
|
||||||
$ff-logo = convert(hexo-config('style.font-family.logo'))
|
$ff-logo = convert(hexo-config('style.font-family.logo'))
|
||||||
|
|
||||||
|
|
||||||
// font size
|
// font size
|
||||||
$fs-root = convert(hexo-config('style.font-size'))
|
$fs-root = convert(hexo-config('style.font-size.root'))
|
||||||
$fs-15 = .9375rem
|
$fs-15 = .9375rem
|
||||||
$fs-14 = .875rem
|
$fs-14 = .875rem
|
||||||
$fs-13 = .8125rem
|
$fs-13 = .8125rem
|
||||||
|
@ -46,19 +50,23 @@ $fs-h3 = 1.375rem // 22px
|
||||||
$fs-h4 = 1.125rem // 18px
|
$fs-h4 = 1.125rem // 18px
|
||||||
$fs-h5 = $fs-15
|
$fs-h5 = $fs-15
|
||||||
$fs-h6 = $fs-12
|
$fs-h6 = $fs-12
|
||||||
$fs-p = $fs-15
|
$fs-p = convert(hexo-config('style.font-size.body'))
|
||||||
$fs-code = $fs-13
|
$fs-code = convert(hexo-config('style.font-size.code'))
|
||||||
|
$fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
|
||||||
|
|
||||||
$border-card = 12px
|
|
||||||
$border-block = 6px
|
$border-card = convert(hexo-config('style.border-radius.card'))
|
||||||
$border-image = 6px
|
$border-block = convert(hexo-config('style.border-radius.block'))
|
||||||
|
$border-button = convert(hexo-config('style.border-radius.button'))
|
||||||
|
$border-image = convert(hexo-config('style.border-radius.image'))
|
||||||
|
|
||||||
// 可以动态变化的属性
|
// 可以动态变化的属性
|
||||||
:root
|
:root
|
||||||
--width-left: 288px
|
--width-left: 288px
|
||||||
--width-main: 720px
|
--width-main: 720px
|
||||||
--gap-l: 16px
|
--gap-l: 16px
|
||||||
--gap-p: .75rem // gap for paragraph
|
--gap-p: 1rem // gap for paragraph
|
||||||
|
--gap-p-compact: 0.75rem
|
||||||
// desktop 2k or larger
|
// desktop 2k or larger
|
||||||
@media screen and (min-width: $device-2k)
|
@media screen and (min-width: $device-2k)
|
||||||
--gap-l: 32px
|
--gap-l: 32px
|
||||||
|
|
|
@ -83,7 +83,7 @@ scrollbar-codeblock($height = 4px)
|
||||||
&::-webkit-scrollbar-thumb
|
&::-webkit-scrollbar-thumb
|
||||||
background: transparent
|
background: transparent
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
&:hover
|
&:hover
|
||||||
&::-webkit-scrollbar-thumb
|
&::-webkit-scrollbar-thumb
|
||||||
background: var(--text-meta)
|
background: var(--text-meta)
|
||||||
|
|
|
@ -38,7 +38,6 @@ set_text_light()
|
||||||
--block: hsl($color-block-h, $color-block-s, 95)
|
--block: hsl($color-block-h, $color-block-s, 95)
|
||||||
--block-border: hsl($color-block-h, $color-block-s, 90)
|
--block-border: hsl($color-block-h, $color-block-s, 90)
|
||||||
--block-hover: hsl($color-block-h, $color-block-s, 92)
|
--block-hover: hsl($color-block-h, $color-block-s, 92)
|
||||||
--block-lighten: hsl($color-block-h, $color-block-s, 100)
|
|
||||||
set_text_dark()
|
set_text_dark()
|
||||||
--theme-bg2: $color-theme
|
--theme-bg2: $color-theme
|
||||||
--theme-link: $color-link
|
--theme-link: $color-link
|
||||||
|
@ -46,11 +45,10 @@ set_text_light()
|
||||||
set_darkmode()
|
set_darkmode()
|
||||||
:root
|
:root
|
||||||
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
|
--site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
|
||||||
--card: hsl($color-block-h, $color-block-s * 1.5, 24)
|
--card: hsl($color-block-h, $color-block-s * 1.2, 24)
|
||||||
--block: hsl($color-block-h, $color-block-s, 16)
|
--block: hsl($color-block-h, $color-block-s, 16)
|
||||||
--block-border: hsl($color-block-h, $color-block-s, 24)
|
--block-border: hsl($color-block-h, $color-block-s, 24)
|
||||||
--block-hover: hsl($color-block-h, $color-block-s, 20)
|
--block-hover: hsl($color-block-h, $color-block-s, 20)
|
||||||
--block-lighten: hsl($color-block-h, $color-block-s, 32)
|
|
||||||
set_text_light()
|
set_text_light()
|
||||||
@media screen and (max-width: $device-mobile-max)
|
@media screen and (max-width: $device-mobile-max)
|
||||||
--site-bg: black
|
--site-bg: black
|
||||||
|
|
|
@ -55,7 +55,6 @@
|
||||||
|
|
||||||
.post-list .post-card:hover
|
.post-list .post-card:hover
|
||||||
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
|
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
|
||||||
transform: translateY(-1px)
|
|
||||||
img
|
img
|
||||||
transform: scale(1.02)
|
transform: scale(1.02)
|
||||||
filter: brightness(80%)
|
filter: brightness(80%)
|
||||||
|
|
|
@ -60,9 +60,12 @@ h1.article-title
|
||||||
p,ul,ol
|
p,ul,ol
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
|
code
|
||||||
|
font-size: inherit
|
||||||
|
padding: 0
|
||||||
p,blockquote,.tag-plugin,ul,ol,.highlight,table
|
p,blockquote,.tag-plugin,ul,ol,.highlight,table
|
||||||
*
|
*
|
||||||
--gap-p: .5rem
|
--gap-p: var(--gap-p-compact)
|
||||||
p,ul,ol
|
p,ul,ol
|
||||||
margin-top: 'calc(%s - 4px)' % var(--gap-p)
|
margin-top: 'calc(%s - 4px)' % var(--gap-p)
|
||||||
margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
|
margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
|
||||||
|
@ -71,6 +74,9 @@ h1.article-title
|
||||||
margin-bottom: var(--gap-p)
|
margin-bottom: var(--gap-p)
|
||||||
iframe
|
iframe
|
||||||
display: block
|
display: block
|
||||||
|
ul>li, ol>li
|
||||||
|
margin-top: 4px
|
||||||
|
margin-bottom: 4px
|
||||||
|
|
||||||
// titles
|
// titles
|
||||||
.md-text.content
|
.md-text.content
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
&.child
|
&.child
|
||||||
padding-left: 2rem
|
padding-left: 2rem
|
||||||
padding: .5em 1rem
|
padding: .5em 1rem
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
color: var(--text-p2)
|
color: var(--text-p2)
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
a.more
|
a.more
|
||||||
padding: 0.25rem 0.5rem
|
padding: 0.25rem 0.5rem
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
|
|
||||||
article.md-text.content+.related-wrap
|
article.md-text.content+.related-wrap
|
||||||
|
|
|
@ -28,7 +28,7 @@ nav.menu
|
||||||
text-align: center
|
text-align: center
|
||||||
&.active, &:hover
|
&.active, &:hover
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
background: var(--block-lighten)
|
background: var(--card)
|
||||||
box-shadow: $boxshadow-button
|
box-shadow: $boxshadow-button
|
||||||
|
|
||||||
.l_left .menu a.nav-item
|
.l_left .menu a.nav-item
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
.md-text .checkbox
|
.md-text .tag-plugin.checkbox
|
||||||
display: flex
|
display: flex
|
||||||
|
align-items: center
|
||||||
font-size: $fs-15
|
font-size: $fs-15
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
--gap-p: .25rem
|
--gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
|
||||||
input
|
input
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
-moz-appearance: none
|
-moz-appearance: none
|
||||||
|
@ -20,8 +21,6 @@
|
||||||
margin-right: 8px
|
margin-right: 8px
|
||||||
if hexo-config('tag_plugins.checkbox.interactive') != true
|
if hexo-config('tag_plugins.checkbox.interactive') != true
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
span
|
|
||||||
margin-top: 1px
|
|
||||||
/* Checkbox */
|
/* Checkbox */
|
||||||
input[type=checkbox]
|
input[type=checkbox]
|
||||||
&:before, &:after
|
&:before, &:after
|
||||||
|
|
|
@ -16,8 +16,8 @@ set_dynamic_color($theme)
|
||||||
--theme-bg1: hsl(hue($theme), 90, 90)
|
--theme-bg1: hsl(hue($theme), 90, 90)
|
||||||
--theme-bg2: hsl(hue($theme), 80, 95)
|
--theme-bg2: hsl(hue($theme), 80, 95)
|
||||||
--theme-border: hsl(hue($theme), 50, 80)
|
--theme-border: hsl(hue($theme), 50, 80)
|
||||||
--text-p0: hsl(hue($theme), 60, 16)
|
--text-p0: hsl(hue($theme), 55, 16)
|
||||||
--text-p1: hsl(hue($theme), 50, 24)
|
--text-p1: hsl(hue($theme), 55, 20)
|
||||||
--text-p2: hsl(hue($theme), 90, 24)
|
--text-p2: hsl(hue($theme), 90, 24)
|
||||||
|
|
||||||
.tag-plugin
|
.tag-plugin
|
||||||
|
@ -72,8 +72,8 @@ set_darkmode_tags()
|
||||||
--theme-bg1: hsl(hue($theme), 80, 20)
|
--theme-bg1: hsl(hue($theme), 80, 20)
|
||||||
--theme-bg2: hsl(hue($theme), 16, 16)
|
--theme-bg2: hsl(hue($theme), 16, 16)
|
||||||
--theme-border: hsl(hue($theme), 50, 24)
|
--theme-border: hsl(hue($theme), 50, 24)
|
||||||
--text-p0: hsl(hue($theme), 80, 80)
|
--text-p0: hsl(hue($theme), 100, 85)
|
||||||
--text-p1: hsl(hue($theme), 64, 80)
|
--text-p1: hsl(hue($theme), 50, 75)
|
||||||
--text-p2: hsl(hue($theme), 80, 72)
|
--text-p2: hsl(hue($theme), 80, 72)
|
||||||
.tag-plugin.tag
|
.tag-plugin.tag
|
||||||
set_dynamic_color($color-theme)
|
set_dynamic_color($color-theme)
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
border: 1px solid var(--block-border)
|
border: 1px solid var(--block-border)
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
width: 320px
|
width: 320px
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.tag-plugin.folders
|
.tag-plugin.folders
|
||||||
display: block
|
display: block
|
||||||
margin: 1rem 0
|
margin: 1rem 0
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
border: 1px solid var(--theme-border)
|
border: 1px solid var(--theme-border)
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
|
@ -2,7 +2,7 @@ details.folding
|
||||||
display: block
|
display: block
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
margin: 1rem 0
|
margin: 1rem 0
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
background: var(--theme-bg2)
|
background: var(--theme-bg2)
|
||||||
border: 1px solid var(--theme-border)
|
border: 1px solid var(--theme-border)
|
||||||
|
@ -10,7 +10,7 @@ details.folding
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
padding: .75rem 1rem
|
padding: .75rem 1rem
|
||||||
margin: 0 - 1rem
|
margin: 0 - 1rem
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
color: var(--text-p2)
|
color: var(--text-p2)
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
position: relative
|
position: relative
|
||||||
|
@ -47,8 +47,8 @@ details.folding[open]
|
||||||
margin: 0 - 1rem
|
margin: 0 - 1rem
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
background: var(--card)
|
background: var(--card)
|
||||||
border-bottom-left-radius: 'calc(%s - 1px)' % $border-block
|
border-bottom-left-radius: 'calc(%s - 1px)' % $border-button
|
||||||
border-bottom-right-radius: 'calc(%s - 1px)' % $border-block
|
border-bottom-right-radius: 'calc(%s - 1px)' % $border-button
|
||||||
font-size: $fs-15
|
font-size: $fs-15
|
||||||
>:first-child
|
>:first-child
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
|
|
|
@ -17,7 +17,10 @@
|
||||||
margin-top: -0.25em
|
margin-top: -0.25em
|
||||||
p:last-child
|
p:last-child
|
||||||
margin-bottom: -0.25em
|
margin-bottom: -0.25em
|
||||||
|
|
||||||
|
.md-text .tag-plugin.grid
|
||||||
|
margin-top: -0.5rem
|
||||||
|
margin-bottom: -0.5rem
|
||||||
|
|
||||||
.tag-plugin.grid
|
.tag-plugin.grid
|
||||||
@media screen and (max-width: $device-tablet)
|
@media screen and (max-width: $device-tablet)
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
@media screen and (max-width: $device-mobile-375)
|
@media screen and (max-width: $device-mobile-375)
|
||||||
width: 100%
|
width: 100%
|
||||||
box-shadow: $boxshadow-card
|
box-shadow: $boxshadow-card
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
trans2: box-shadow transform
|
trans2: box-shadow transform
|
||||||
&:hover
|
&:hover
|
||||||
box-shadow: $boxshadow-card-float
|
box-shadow: $boxshadow-card-float
|
||||||
|
|
|
@ -1,26 +1,25 @@
|
||||||
.md-text .tag-plugin.note
|
.md-text .tag-plugin.note
|
||||||
position: relative
|
position: relative
|
||||||
margin-top: 1rem
|
padding: 0.25rem 1rem
|
||||||
margin-bottom: 1rem
|
|
||||||
padding: 0 1rem
|
|
||||||
border-radius: $border-block
|
border-radius: $border-block
|
||||||
background: var(--theme-bg2)
|
background: var(--theme-bg2)
|
||||||
border: 1px solid var(--theme-border)
|
if hexo-config('tag_plugins.note.border') == true
|
||||||
|
border: 1px solid var(--theme-border)
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
>.title
|
>.title
|
||||||
font-size: $fs-15
|
font-size: $fs-15
|
||||||
line-height: 1.2
|
line-height: 1.5
|
||||||
margin-top: 1rem
|
margin-top: var(--gap-p-compact)
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
color: var(--text-p0)
|
color: var(--text-p0)
|
||||||
>.body
|
>.body
|
||||||
&,p
|
&,p
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
margin-top: .5rem
|
margin-top: var(--gap-p-compact)
|
||||||
margin-bottom: 1rem
|
margin-bottom: var(--gap-p-compact)
|
||||||
>.body:only-child
|
>.body:only-child
|
||||||
margin: 1rem 0
|
margin: 'calc(%s - 0.25rem)' % var(--gap-p) 0
|
||||||
|
|
||||||
|
|
||||||
.md-text .tag-plugin.note[color]
|
.md-text .tag-plugin.note[color]
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
max-width 400px
|
max-width 400px
|
||||||
position: relative
|
position: relative
|
||||||
// override
|
// override
|
||||||
.tag-plugin.quot
|
.md-text.content .tag-plugin.quot
|
||||||
h1
|
h1
|
||||||
font-size: $fs-h1
|
font-size: $fs-h1
|
||||||
font-weight: 900
|
font-weight: 900
|
||||||
|
@ -30,6 +30,7 @@
|
||||||
h2,h3,h4,h5,h6
|
h2,h3,h4,h5,h6
|
||||||
font-size: $fs-h3
|
font-size: $fs-h3
|
||||||
margin-top: 1em
|
margin-top: 1em
|
||||||
|
margin-bottom: 0
|
||||||
p
|
p
|
||||||
font-size: $fs-h4
|
font-size: $fs-h4
|
||||||
color: var(--text-p0)
|
color: var(--text-p0)
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
align-self: flex-end
|
align-self: flex-end
|
||||||
|
|
||||||
.tag-plugin.tabs
|
.tag-plugin.tabs
|
||||||
ul.nav-tabs
|
.nav-tabs
|
||||||
display: flex
|
display: flex
|
||||||
align-self: center
|
align-self: center
|
||||||
overflow: scroll visible
|
overflow: scroll visible
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
bottom: 0
|
bottom: 0
|
||||||
left: 0
|
left: 0
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
li.tab
|
.tab
|
||||||
list-style-type: none
|
list-style-type: none
|
||||||
a
|
a
|
||||||
display: block
|
display: block
|
||||||
|
|
|
@ -99,15 +99,11 @@
|
||||||
|
|
||||||
.tag-plugin.timeline .body
|
.tag-plugin.timeline .body
|
||||||
background: var(--card)
|
background: var(--card)
|
||||||
border-radius: 12px
|
border-radius: $border-card
|
||||||
border-top-left-radius: 2px
|
border-top-left-radius: 2px
|
||||||
padding: 0.5rem 1rem
|
padding: 0.5rem 1rem
|
||||||
margin-top: 4px
|
margin-top: 4px
|
||||||
box-shadow: $boxshadow-block
|
box-shadow: $boxshadow-block
|
||||||
trans2: transform box-shadow
|
|
||||||
&:hover
|
|
||||||
transform: translateY(-1px)
|
|
||||||
box-shadow: $boxshadow-card-float
|
|
||||||
p
|
p
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
img
|
img
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
details.toc
|
details.toc
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
border: 1px solid var(--block-border)
|
border: 1px solid var(--block-border)
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
color: var(--text-p2)
|
color: var(--text-p2)
|
||||||
summary
|
summary
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
line-height: 1
|
line-height: 1
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
font-family: $ff-body
|
font-family: $ff-body
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
background-color: var(--card)
|
background-color: var(--card)
|
||||||
color: var(--text-p0)
|
color: var(--text-p0)
|
||||||
border: 1px solid var(--block-border)
|
border: 1px solid var(--block-border)
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
padding: 2rem
|
padding: 2rem
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
|
|
||||||
#search-result
|
#search-result
|
||||||
ul.search-result-list
|
ul.search-result-list
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
// 其它分页链接
|
// 其它分页链接
|
||||||
.widget-wrapper.toc.multi .doc-tree
|
.widget-wrapper.toc.multi .doc-tree
|
||||||
border-radius: $border-block
|
border-radius: $border-button
|
||||||
background: var(--block)
|
background: var(--block)
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
border: 1px solid var(--block-border)
|
border: 1px solid var(--block-border)
|
||||||
|
|
|
@ -35,15 +35,22 @@ div.swiper-slide
|
||||||
max-width: 75%
|
max-width: 75%
|
||||||
|
|
||||||
.swiper-button-prev,.swiper-button-next
|
.swiper-button-prev,.swiper-button-next
|
||||||
padding: 1rem 0.5rem
|
padding: 1rem 0.25rem
|
||||||
margin-top: -2rem !important
|
margin-top: -2rem !important
|
||||||
border-radius: 4px
|
border-radius: 40px
|
||||||
background: alpha(white, 0.25)
|
background: alpha(white, 0.25)
|
||||||
trans1 background
|
trans1 background
|
||||||
--swiper-theme-color: black !important
|
--swiper-theme-color: var(--text-p0) !important
|
||||||
&:after
|
&:after
|
||||||
font-size: 1.2rem !important
|
font-size: 1.2rem !important
|
||||||
font-weight: 700 !important
|
font-weight: 700 !important
|
||||||
|
color: var(--swiper-theme-color)
|
||||||
&:hover
|
&:hover
|
||||||
background: white !important
|
background: white !important
|
||||||
--swiper-theme-color: $color-hover !important
|
--swiper-theme-color: $color-hover !important
|
||||||
|
|
||||||
|
.swiper-button-prev:after
|
||||||
|
transform: translateX(-1px)
|
||||||
|
|
||||||
|
.swiper-button-next:after
|
||||||
|
transform: translateX(1px)
|
|
@ -144,7 +144,7 @@ const init = {
|
||||||
*/
|
*/
|
||||||
registerTabsTag: function () {
|
registerTabsTag: function () {
|
||||||
// Binding `nav-tabs` & `tab-content` by real time permalink changing.
|
// Binding `nav-tabs` & `tab-content` by real time permalink changing.
|
||||||
document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
|
document.querySelectorAll('.tabs .nav-tabs .tab').forEach(element => {
|
||||||
element.addEventListener('click', event => {
|
element.addEventListener('click', event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
// Prevent selected tab to select again.
|
// Prevent selected tab to select again.
|
||||||
|
|
Loading…
Reference in New Issue