[opt] style
This commit is contained in:
parent
d2e2c3b5bb
commit
ea81cd4b01
|
@ -86,11 +86,14 @@ function layoutWidgets() {
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
function layoutFooterDiv() {
|
function layoutFooterDiv() {
|
||||||
if (page.layout !== 'wiki' && theme.footer.social) {
|
const { social } = theme.footer
|
||||||
|
if (social == null) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
var el = '<footer class="footer dis-select">';
|
var el = '<footer class="footer dis-select">';
|
||||||
el += '<div class="social-wrap">';
|
el += '<div class="social-wrap">';
|
||||||
for (let id of Object.keys(theme.footer.social)) {
|
for (let id of Object.keys(social)) {
|
||||||
let item = theme.footer.social[id];
|
let item = social[id];
|
||||||
if (item.icon && (item.url || item.onclick)) {
|
if (item.icon && (item.url || item.onclick)) {
|
||||||
el += '<a class="social"';
|
el += '<a class="social"';
|
||||||
if (item.title) {
|
if (item.title) {
|
||||||
|
@ -115,9 +118,6 @@ function layoutFooterDiv() {
|
||||||
el += '</div>';
|
el += '</div>';
|
||||||
el += '</footer>';
|
el += '</footer>';
|
||||||
return el;
|
return el;
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function layoutLogo() {
|
function layoutLogo() {
|
||||||
|
|
|
@ -7,9 +7,13 @@ function layoutDiv() {
|
||||||
if (item == undefined || item.length == 0) {
|
if (item == undefined || item.length == 0) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}">`
|
el += `<a class="nav-item${id == page.menu_id ? ' active' : ''}" title="${item.title}" href="${url_for(item.url)}"`
|
||||||
|
if (item.theme?.length > 0) {
|
||||||
|
el += ` style="color:${item.theme}"`
|
||||||
|
}
|
||||||
|
el += `>`
|
||||||
if (item.icon?.length > 0) {
|
if (item.icon?.length > 0) {
|
||||||
if (item.icon.startsWith('<img')) {
|
if (item.icon.startsWith('<')) {
|
||||||
el += item.icon
|
el += item.icon
|
||||||
} else {
|
} else {
|
||||||
el += `<img no-lazy src="${item.icon}">`
|
el += `<img no-lazy src="${item.icon}">`
|
||||||
|
|
|
@ -23,7 +23,7 @@ function layoutDiv() {
|
||||||
}
|
}
|
||||||
el += '<widget class="widget-wrapper timeline">';
|
el += '<widget class="widget-wrapper timeline">';
|
||||||
if (item.title) {
|
if (item.title) {
|
||||||
el += '<div class="widget-header cap dis-select">';
|
el += '<div class="widget-header dis-select">';
|
||||||
el += '<span class="name">' + item.title + '</span>';
|
el += '<span class="name">' + item.title + '</span>';
|
||||||
el += '</div>';
|
el += '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@ function layoutDiv() {
|
||||||
var el = '';
|
var el = '';
|
||||||
el += '<widget class="widget-wrapper markdown">';
|
el += '<widget class="widget-wrapper markdown">';
|
||||||
if (item.title?.length > 0) {
|
if (item.title?.length > 0) {
|
||||||
el += '<div class="widget-header cap dis-select">';
|
el += '<div class="widget-header dis-select">';
|
||||||
el += '<span class="name">' + item.title + '</span>';
|
el += '<span class="name">' + item.title + '</span>';
|
||||||
el += '</div>';
|
el += '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
function layoutDiv() {
|
function layoutDiv() {
|
||||||
var el = '<widget class="widget-wrapper post-list">';
|
var el = '<widget class="widget-wrapper post-list">';
|
||||||
// header
|
// header
|
||||||
el += '<div class="widget-header cap dis-select">';
|
el += '<div class="widget-header dis-select">';
|
||||||
el += '<span class="name">' + __("meta.recent_update") + '</span>';
|
el += '<span class="name">' + __("meta.recent_update") + '</span>';
|
||||||
if (item.rss) {
|
if (item.rss) {
|
||||||
el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';
|
el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';
|
||||||
|
|
|
@ -9,7 +9,7 @@ function relatedPostsInTopic() {
|
||||||
}
|
}
|
||||||
var el = ''
|
var el = ''
|
||||||
el += `<widget class="widget-wrapper post-list">`
|
el += `<widget class="widget-wrapper post-list">`
|
||||||
el += `<div class="widget-header cap dis-select">`
|
el += `<div class="widget-header dis-select">`
|
||||||
el += `<span class="name">${__('btn.topic') + __('symbol.colon') + topic.name}</span>`
|
el += `<span class="name">${__('btn.topic') + __('symbol.colon') + topic.name}</span>`
|
||||||
el += `</div>`
|
el += `</div>`
|
||||||
el += `<div class="widget-body">`
|
el += `<div class="widget-body">`
|
||||||
|
@ -35,7 +35,7 @@ function relatedWiki() {
|
||||||
var el = ''
|
var el = ''
|
||||||
for (let relatedItem of relatedItems) {
|
for (let relatedItem of relatedItems) {
|
||||||
el += `<widget class="widget-wrapper post-card">`
|
el += `<widget class="widget-wrapper post-card">`
|
||||||
el += `<div class="widget-header cap dis-select">`
|
el += `<div class="widget-header dis-select">`
|
||||||
el += `<span class="name">${__('meta.more') + __('symbol.colon') + relatedItem.name}</span>`
|
el += `<span class="name">${__('meta.more') + __('symbol.colon') + relatedItem.name}</span>`
|
||||||
el += `</div>`
|
el += `</div>`
|
||||||
el += `<div class="widget-body">`
|
el += `<div class="widget-body">`
|
||||||
|
|
|
@ -10,7 +10,7 @@ function layoutDiv() {
|
||||||
opts.class = 'tag ';
|
opts.class = 'tag ';
|
||||||
el += '<widget class="widget-wrapper tagcloud">';
|
el += '<widget class="widget-wrapper tagcloud">';
|
||||||
if (item.title) {
|
if (item.title) {
|
||||||
el += '<div class="widget-header cap dis-select">';
|
el += '<div class="widget-header dis-select">';
|
||||||
el += '<span class="name">' + item.title + '</span>';
|
el += '<span class="name">' + item.title + '</span>';
|
||||||
el += '</div>';
|
el += '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ function layoutDiv() {
|
||||||
}
|
}
|
||||||
el += '<widget class="widget-wrapper timeline">';
|
el += '<widget class="widget-wrapper timeline">';
|
||||||
if (item.title) {
|
if (item.title) {
|
||||||
el += '<div class="widget-header cap dis-select">';
|
el += '<div class="widget-header dis-select">';
|
||||||
el += '<span class="name">' + item.title + '</span>';
|
el += '<span class="name">' + item.title + '</span>';
|
||||||
el += '</div>';
|
el += '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,7 @@ function layoutTocBody() {
|
||||||
|
|
||||||
function layoutTocHeader(title) {
|
function layoutTocHeader(title) {
|
||||||
var el = ''
|
var el = ''
|
||||||
el += `<div class="widget-header cap dis-select">`
|
el += `<div class="widget-header dis-select">`
|
||||||
el += `<span class="name">${title || __("meta.toc")}</span>`
|
el += `<span class="name">${title || __("meta.toc")}</span>`
|
||||||
el += `</div>`
|
el += `</div>`
|
||||||
return el
|
return el
|
||||||
|
|
|
@ -14,7 +14,7 @@ html += `<html lang="${page.lang}">`
|
||||||
html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
|
html += `<div class="l_body ${page_type}" id="start" layout="page.layout">`
|
||||||
html += `<aside class="l_left">`
|
html += `<aside class="l_left">`
|
||||||
html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
|
html += `<img no-lazy class="sidebar-bg" src="${theme.default.sidebar}">`
|
||||||
html += `<div class="sidebar-container blur">`
|
html += `<div class="sidebar-container">`
|
||||||
html += partial('_partial/sidebar/index')
|
html += partial('_partial/sidebar/index')
|
||||||
html += `</div>`
|
html += `</div>`
|
||||||
html += `</aside>`
|
html += `</aside>`
|
||||||
|
|
|
@ -16,7 +16,7 @@ hexo.extend.helper.register('category_color', function(cat){
|
||||||
} else if (textColor.length == (1+6)) { // #ffffff
|
} else if (textColor.length == (1+6)) { // #ffffff
|
||||||
bgColor += '20'
|
bgColor += '20'
|
||||||
}
|
}
|
||||||
return ` style="--text-p3:${textColor};--theme-block:${bgColor}"`;
|
return ` style="--text-p2:${textColor};--theme-block:${bgColor}"`;
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
})
|
})
|
||||||
|
|
|
@ -37,8 +37,9 @@ set_text_light()
|
||||||
--card: hsl($color-block-h, $color-block-s, 100)
|
--card: hsl($color-block-h, $color-block-s, 100)
|
||||||
--alpha20: rgba(white, 0.2)
|
--alpha20: rgba(white, 0.2)
|
||||||
--alpha50: rgba(white, 0.5)
|
--alpha50: rgba(white, 0.5)
|
||||||
--alpha75: rgba(white, 0.75)
|
--alpha60: rgba(white, 0.6)
|
||||||
--alpha100: white
|
--alpha100: white
|
||||||
|
--sidebar-bg: rgba(white, 0.5)
|
||||||
--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)
|
||||||
|
@ -54,8 +55,9 @@ set_darkmode()
|
||||||
--block-hover: hsl($color-block-h, $color-block-s, 20)
|
--block-hover: hsl($color-block-h, $color-block-s, 20)
|
||||||
--alpha20: rgba(black, 0.2)
|
--alpha20: rgba(black, 0.2)
|
||||||
--alpha50: rgba(black, 0.5)
|
--alpha50: rgba(black, 0.5)
|
||||||
--alpha75: rgba(black, 0.75)
|
--alpha60: rgba(black, 0.6)
|
||||||
--alpha100: black
|
--alpha100: black
|
||||||
|
--sidebar-bg: rgba(black, 0.64)
|
||||||
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
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
display: grid
|
display: grid
|
||||||
grid-gap: 0.25rem 0.25rem
|
grid-gap: 0.25rem 0.25rem
|
||||||
grid-template-columns: repeat(auto-fill, 32px)
|
grid-template-columns: repeat(auto-fill, 32px)
|
||||||
a.social
|
.social
|
||||||
line-height: 0
|
line-height: 0
|
||||||
display: inline-block
|
display: inline-block
|
||||||
padding: 6px
|
padding: 6px
|
||||||
|
@ -18,22 +18,3 @@
|
||||||
z-index: 1
|
z-index: 1
|
||||||
filter: unset
|
filter: unset
|
||||||
background: var(--alpha100)
|
background: var(--alpha100)
|
||||||
|
|
||||||
.proj-wrap
|
|
||||||
display: grid
|
|
||||||
grid-gap: 0.25rem 0.25rem
|
|
||||||
a.item
|
|
||||||
border-radius: 4px
|
|
||||||
font-size: $fs-13
|
|
||||||
font-weight: 500
|
|
||||||
color: var(--text-p2)
|
|
||||||
background: var(--block)
|
|
||||||
border: 1px solid var(--block-border)
|
|
||||||
overflow: hidden
|
|
||||||
padding: .75em
|
|
||||||
text-align: center
|
|
||||||
svg
|
|
||||||
margin-right: .5em
|
|
||||||
&:hover
|
|
||||||
color: $color-hover
|
|
||||||
background: var(--card)
|
|
||||||
|
|
|
@ -21,20 +21,16 @@
|
||||||
color: var(--text-p3)
|
color: var(--text-p3)
|
||||||
text-align: center
|
text-align: center
|
||||||
background: var(--alpha50)
|
background: var(--alpha50)
|
||||||
@supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
|
|
||||||
backdrop-filter: saturate(200%) blur(var(--blur-px))
|
|
||||||
-webkit-backdrop-filter: saturate(200%) blur(var(--blur-px))
|
|
||||||
trans1 background
|
trans1 background
|
||||||
position: relative
|
position: relative
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: center
|
justify-content: center
|
||||||
img
|
img,svg
|
||||||
height: 32px
|
height: 28px
|
||||||
object-fit: contain
|
object-fit: contain
|
||||||
opacity 0.5
|
filter: grayscale(100%) brightness(0.8) opacity(0.8)
|
||||||
filter: grayscale(100%) brightness(0.4)
|
|
||||||
trans1 all
|
trans1 all
|
||||||
span
|
span
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
|
@ -42,8 +38,7 @@
|
||||||
&.active, &:hover
|
&.active, &:hover
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
background: var(--alpha100)
|
background: var(--alpha100)
|
||||||
img
|
img,svg
|
||||||
opacity: 1
|
|
||||||
filter: unset
|
filter: unset
|
||||||
&.active:after
|
&.active:after
|
||||||
content: ''
|
content: ''
|
||||||
|
|
|
@ -35,7 +35,10 @@
|
||||||
path[p-id="1562"]
|
path[p-id="1562"]
|
||||||
color: $color-theme
|
color: $color-theme
|
||||||
|
|
||||||
|
&[searching='true']
|
||||||
|
.search-icon
|
||||||
|
path[p-id="1562"]
|
||||||
|
color: $c-green
|
||||||
&.noresult[searching='true']
|
&.noresult[searching='true']
|
||||||
.search-icon
|
.search-icon
|
||||||
path[p-id="1562"]
|
path[p-id="1562"]
|
||||||
|
|
|
@ -19,23 +19,13 @@
|
||||||
background: var(--text-meta)
|
background: var(--text-meta)
|
||||||
.sidebar-container
|
.sidebar-container
|
||||||
height: 100%
|
height: 100%
|
||||||
--blur-px: 50px
|
--blur-px: 100px
|
||||||
|
--blur-bg: var(--sidebar-bg)
|
||||||
|
@supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
|
||||||
|
background: var(--blur-bg)
|
||||||
|
backdrop-filter: saturate(240%) blur(var(--blur-px))
|
||||||
|
-webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
word-break: break-all
|
word-break: break-all
|
||||||
text-align: justify
|
text-align: justify
|
||||||
|
|
||||||
.l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body
|
|
||||||
display: flex
|
|
||||||
margin-bottom: 1.5rem
|
|
||||||
flex-direction: column
|
|
||||||
align-items: flex-start
|
|
||||||
a.wiki-home
|
|
||||||
margin-bottom: 0.5rem
|
|
||||||
color: var(--text-p1)
|
|
||||||
svg
|
|
||||||
margin-right: 2px
|
|
||||||
&:hover
|
|
||||||
color: $color-hover
|
|
||||||
filter: unset !important
|
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
margin-top: 8px
|
margin-top: 8px
|
||||||
.item
|
.item
|
||||||
line-height: 1.2
|
line-height: 1.2
|
||||||
background: var(--alpha50)
|
background: var(--alpha20)
|
||||||
padding: 10px 16px
|
padding: 10px 16px
|
||||||
border-radius: $border-card
|
border-radius: $border-card
|
||||||
display: block
|
display: block
|
||||||
|
@ -34,6 +34,6 @@
|
||||||
.item
|
.item
|
||||||
trans1 background
|
trans1 background
|
||||||
.item.active
|
.item.active
|
||||||
background: var(--card)
|
background: var(--alpha50)
|
||||||
.item:hover
|
.item:hover
|
||||||
background: var(--card)
|
background: var(--alpha50)
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
a
|
a
|
||||||
trans1 all
|
trans1 all
|
||||||
border-bottom: 1px solid var(--text-p0)
|
border-bottom: 1px solid var(--text-p0)
|
||||||
color: var(--text-p0)
|
color: var(--text-p1)
|
||||||
&:hover
|
&:hover
|
||||||
color: $color-hover
|
color: $color-hover
|
||||||
border-bottom: 1px solid $color-hover
|
border-bottom: 1px solid $color-hover
|
||||||
|
|
|
@ -1,6 +1,13 @@
|
||||||
.doc-tree+.doc-tree
|
.doc-tree+.doc-tree
|
||||||
margin-top: 2px
|
margin-top: 2px
|
||||||
|
|
||||||
|
.widget-wrapper.toc.multi
|
||||||
|
// .widget-header.cap
|
||||||
|
// color: $color-theme
|
||||||
|
// filter: brightness(75%)
|
||||||
|
.widget-body+.widget-header.cap
|
||||||
|
margin-top: 28px
|
||||||
|
|
||||||
// 其它分页链接
|
// 其它分页链接
|
||||||
.widget-wrapper.toc.multi .doc-tree
|
.widget-wrapper.toc.multi .doc-tree
|
||||||
border-radius: $border-card
|
border-radius: $border-card
|
||||||
|
@ -12,7 +19,6 @@
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
align-items: center
|
align-items: center
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
font-weight: 500
|
|
||||||
position: relative
|
position: relative
|
||||||
trans1 background
|
trans1 background
|
||||||
.toc-text
|
.toc-text
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
.widgets
|
.widgets
|
||||||
.loading-wrap
|
.loading-wrap
|
||||||
margin: 0.5rem 0
|
margin: 0.5rem 0
|
||||||
|
background: var(--alpha50)
|
||||||
|
|
||||||
.widgets
|
.widgets
|
||||||
overflow: scroll
|
overflow: scroll
|
||||||
|
@ -17,12 +18,15 @@
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
align-items: center
|
align-items: center
|
||||||
font-weight: 500
|
|
||||||
line-height: 28px
|
line-height: 28px
|
||||||
|
font-weight: 500
|
||||||
|
font-size: $fs-12
|
||||||
|
color: var(--text-p1)
|
||||||
.item
|
.item
|
||||||
display: block
|
display: block
|
||||||
>span
|
>span
|
||||||
text-align: left
|
text-align: left
|
||||||
|
opacity 0.6
|
||||||
&:empty
|
&:empty
|
||||||
display: none
|
display: none
|
||||||
.cap-action
|
.cap-action
|
||||||
|
@ -31,7 +35,7 @@
|
||||||
trans2: color background
|
trans2: color background
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
padding: 6px
|
padding: 6px
|
||||||
margin-right: -4px
|
margin-right: -5px
|
||||||
.icon
|
.icon
|
||||||
fill: var(--text-p2)
|
fill: var(--text-p2)
|
||||||
&:hover
|
&:hover
|
||||||
|
|
Loading…
Reference in New Issue