[opt] style
This commit is contained in:
xaoxuu
parent
801b8b58a7
commit
88b5c8d9dc
|
|
@ -6,10 +6,18 @@ solar:notebook-bookmark-bold-duotone: <svg xmlns="http://www.w3.org/2000/svg" wi
|
|||
|
||||
|
||||
default:goback: <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>
|
||||
|
||||
# 必须包含 class="loading"
|
||||
default:loading: <svg class="loading" style="vertical-align:middle;fill:currentColor;overflow:hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg>
|
||||
|
||||
# 必须包含 class="icon search-icon"
|
||||
default:search: <svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" p-id="1562"></path></svg>
|
||||
default:rss: <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8938"><path d="M800.966 947.251c0-404.522-320.872-732.448-716.69-732.448V62.785c477.972 0 865.44 395.987 865.44 884.466h-148.75z m-162.273 0h-148.74c0-228.98-181.628-414.598-405.678-414.598v-152.01c306.205 0 554.418 253.68 554.418 566.608z m-446.24-221.12c59.748 0 108.189 49.503 108.189 110.557 0 61.063-48.44 110.563-108.188 110.563-59.747 0-108.18-49.5-108.18-110.563 0-61.054 48.433-110.556 108.18-110.556z" p-id="8939"></path></svg>
|
||||
default:bookmark: <svg t="1705415018387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14793" width="200" height="200"><path d="M256 896a42.666667 42.666667 0 0 1-20.906667-5.546667A42.666667 42.666667 0 0 1 213.333333 853.333333V227.413333A97.28 97.28 0 0 1 307.2 128h409.6A97.28 97.28 0 0 1 810.666667 227.413333V853.333333a42.666667 42.666667 0 0 1-21.333334 36.693334 42.666667 42.666667 0 0 1-42.666666 0l-241.92-136.96-227.413334 136.533333A42.666667 42.666667 0 0 1 256 896z" p-id="14794"></path></svg>
|
||||
default:rss: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19q0-.825.588-1.412T5 17q.825 0 1.413.588T7 19q0 .825-.587 1.413T5 21m13.5 0q-.65 0-1.088-.475T16.9 19.4q-.275-2.425-1.312-4.537T12.9 11.1q-1.65-1.65-3.762-2.687T4.6 7.1q-.65-.075-1.125-.512T3 5.5q0-.65.45-1.062t1.075-.363q3.075.275 5.763 1.563t4.737 3.337q2.05 2.05 3.338 4.738t1.562 5.762q.05.625-.363 1.075T18.5 21m-6 0q-.625 0-1.075-.437T10.85 19.5q-.225-1.225-.787-2.262T8.65 15.35q-.85-.85-1.888-1.412T4.5 13.15q-.625-.125-1.062-.575T3 11.5q0-.65.45-1.075t1.075-.325q1.825.25 3.413 1.063t2.837 2.062q1.25 1.25 2.063 2.838t1.062 3.412q.1.625-.325 1.075T12.5 21"/></svg>
|
||||
|
||||
# 必须包含 class="active-icon"
|
||||
default:bookmark.active: <svg class="active-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M21 11.098v4.993c0 3.096 0 4.645-.734 5.321c-.35.323-.792.526-1.263.58c-.987.113-2.14-.907-4.445-2.946c-1.02-.901-1.529-1.352-2.118-1.47a2.225 2.225 0 0 0-.88 0c-.59.118-1.099.569-2.118 1.47c-2.305 2.039-3.458 3.059-4.445 2.945a2.238 2.238 0 0 1-1.263-.579C3 20.736 3 19.188 3 16.091v-4.994C3 6.81 3 4.666 4.318 3.333C5.636 2 7.758 2 12 2c4.243 0 6.364 0 7.682 1.332C21 4.665 21 6.81 21 11.098" opacity=".5"/><path fill="currentColor" d="M9 5.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5z"/></svg>
|
||||
|
||||
# 必须包含 class="icon"
|
||||
default:sidebar: <svg t="1705412886951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8331" width="200" height="200"><path d="M638.72 970.666667h-256c-118.186667 0-198.272-25.002667-251.946667-78.72S52.053333 758.186667 52.053333 640V384c0-118.186667 25.002667-198.272 78.72-251.946667S264.533333 53.333333 382.72 53.333333h256c118.186667 0 198.272 25.002667 251.946667 78.72S969.386667 265.813333 969.386667 384v256c0 118.186667-25.002667 198.272-78.72 251.946667S756.906667 970.666667 638.72 970.666667z m-256-853.333334c-100.096 0-165.802667 19.2-206.72 59.946667S116.053333 283.904 116.053333 384v256c0 100.096 19.072 165.802667 59.946667 206.72S282.624 906.666667 382.72 906.666667h256c100.096 0 165.802667-19.072 206.72-59.946667S905.386667 740.096 905.386667 640V384c0-100.096-19.072-165.802667-59.946667-206.72S738.816 117.333333 638.72 117.333333z" p-id="8332"></path><path d="M638.72 970.666667a32 32 0 0 1-32-32V85.333333a32 32 0 0 1 32-32 32 32 0 0 1 32 32v853.333334a32 32 0 0 1-32 32zM340.053333 653.226667a31.914667 31.914667 0 0 1-22.613333-9.386667 32 32 0 0 1 0-45.269333L404.053333 512 317.44 425.386667a32 32 0 0 1 0-45.226667 32 32 0 0 1 45.226667 0l109.226666 109.226667a32 32 0 0 1 0 45.269333L362.666667 643.84a31.914667 31.914667 0 0 1-22.613334 9.386667z" p-id="8333"></path></svg>
|
||||
default:pin: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.068l-3.771 3.905c-.54.559-.81.839-1.04.935c-.52.22-1.099.032-1.373-.448c-.12-.21-.158-.59-.232-1.35c-.043-.43-.064-.644-.128-.824a1.433 1.433 0 0 0-.835-.864c-.173-.067-.38-.089-.795-.133c-.734-.077-1.101-.116-1.305-.24c-.463-.284-.646-.883-.433-1.422c.094-.237.364-.517.904-1.076L5.456 12l1.238-1.238zl5.306-5.306L18.544 12l2.464 2.55c.54.56.81.84.904 1.076c.213.54.03 1.139-.433 1.423c-.204.124-.57.163-1.305.24c-.414.044-.622.066-.795.133c-.389.149-.69.462-.835.864c-.064.18-.085.394-.128.823c-.075.76-.112 1.14-.232 1.351c-.274.48-.853.669-1.374.448c-.228-.096-.498-.376-1.038-.935z" opacity=".5"/><path fill="currentColor" fill-rule="evenodd" d="M12 16a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-10c-.284 0-.474.34-.854 1.023l-.098.176c-.108.194-.162.29-.246.354c-.085.064-.19.088-.4.135l-.19.044c-.738.167-1.107.25-1.195.532c-.088.283.164.577.667 1.165l.13.152c.143.167.215.25.247.354c.032.104.021.215 0 .438l-.02.203c-.076.785-.114 1.178.115 1.352c.23.174.576.015 1.267-.303l.178-.082c.197-.09.295-.135.399-.135c.104 0 .202.045.399.135l.178.082c.691.319 1.037.477 1.267.303c.23-.174.191-.567.115-1.352l-.02-.203c-.021-.223-.032-.334 0-.438c.032-.103.104-.187.247-.354l.13-.152c.503-.588.755-.882.667-1.165c-.088-.282-.457-.365-1.195-.532l-.19-.044c-.21-.047-.315-.07-.4-.135c-.084-.064-.138-.16-.246-.354l-.098-.176C12.474 6.34 12.284 6 12 6" clip-rule="evenodd"/></svg>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
<%
|
||||
function layoutDiv() {
|
||||
var el = ''
|
||||
el += `<a class="link" title="${item.title}" href="${item.url}">`
|
||||
const isActive = url_for(item.url) == url_for(page.path)
|
||||
el += `<a class="link${isActive ? ' active' : ''}" title="${item.title}" href="${item.url}">`
|
||||
el += `<div class="flex">`
|
||||
if (item.icon) {
|
||||
el += icon(item.icon)
|
||||
}
|
||||
if (showText) {
|
||||
if (columns <= 2) {
|
||||
el += `<span>${item.title}</span>`
|
||||
}
|
||||
el += `</div>`
|
||||
if (columns == 1 && isActive) {
|
||||
el += icon('default:bookmark.active')
|
||||
}
|
||||
el += `</a>`
|
||||
return el
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function layoutDiv(linklist) {
|
|||
}
|
||||
el += `<div class="linklist ${align}" ${style}>`
|
||||
for (let link of links) {
|
||||
el += partial('link', {item: link, showText: columns > 2 ? false : true})
|
||||
el += partial('link', {item: link, columns: columns})
|
||||
}
|
||||
el += `</div>`
|
||||
return el
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ function layoutDiv() {
|
|||
}
|
||||
el += (post.title || post.wiki) + '</span>';
|
||||
if (isActive) {
|
||||
el += icon('default:bookmark')
|
||||
el += icon('default:bookmark.active')
|
||||
}
|
||||
el += '</a>';
|
||||
el += '';
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function relatedPostsInTopic() {
|
|||
el += `<a class="item${isActive ? ' active' : ''}" href="${url_for(post.path)}">`
|
||||
el += `<span class="title">${post.title}</span>`
|
||||
if (isActive) {
|
||||
el += icon('default:bookmark')
|
||||
el += icon('default:bookmark.active')
|
||||
}
|
||||
el += `</a>`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ function layoutDocTree(pages) {
|
|||
el += `<a class="doc-tree-link${isActive}" href="${href}">`
|
||||
el += `<span class="toc-text">${p.title}</span>`
|
||||
if (isActive.length > 0) {
|
||||
el += icon('default:bookmark')
|
||||
el += icon('default:bookmark.active')
|
||||
}
|
||||
el += `</a>`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
'use strict';
|
||||
|
||||
hexo.extend.helper.register('icon', function(args){
|
||||
hexo.extend.helper.register('icon', function(key) {
|
||||
const { icons } = hexo.theme.config
|
||||
var result = ''
|
||||
if (icons[args]) {
|
||||
result = icons[args]
|
||||
if (icons[key]) {
|
||||
result = icons[key]
|
||||
} else {
|
||||
result = args
|
||||
result = key
|
||||
}
|
||||
if (result.startsWith('/') || result.startsWith('https://') || result.startsWith('http://')) {
|
||||
return `<img src="${result}" />`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.flex
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.flex.column
|
||||
flex-direction: column
|
||||
|
|
@ -4,3 +4,6 @@ svg.icon
|
|||
vertical-align: middle
|
||||
fill: currentColor
|
||||
overflow: hidden
|
||||
|
||||
svg.active-icon
|
||||
color: $c-green
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
.widgets .linklist
|
||||
.widget-body .linklist
|
||||
display: grid
|
||||
grid-gap: 8px
|
||||
margin: 1em 0
|
||||
|
||||
.linklist .link
|
||||
border-radius: $border-bar
|
||||
background: var(--alpha50)
|
||||
color: var(--text-p2)
|
||||
border: none
|
||||
border-bottom: none
|
||||
min-height: 32px
|
||||
padding: 2px 4px
|
||||
padding: 0 4px
|
||||
trans1 background
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
txt-ellipsis()
|
||||
&.active
|
||||
background: var(--alpha50)
|
||||
svg,img
|
||||
filter: unset
|
||||
|
||||
.linklist .link span
|
||||
padding: 0 4px
|
||||
|
|
@ -23,23 +23,23 @@
|
|||
.linklist .link svg, .linklist .link img
|
||||
$size = 16px
|
||||
padding: 0 2px
|
||||
color: $color-theme
|
||||
&:not([class='active-icon'])
|
||||
color: $color-theme
|
||||
max-height: 18px
|
||||
width: auto
|
||||
filter: grayscale(100%) brightness(0.8) opacity(0.8)
|
||||
trans1 filter
|
||||
flex-shrink: 0
|
||||
|
||||
.markdown .linklist.center .link
|
||||
border-radius: $border-button
|
||||
|
||||
.linklist.left
|
||||
grid-gap: 4px
|
||||
.widget-body .linklist.left
|
||||
grid-gap: 2px
|
||||
.linklist.left .link
|
||||
justify-content: flex-start
|
||||
padding: 2px 16px
|
||||
justify-content: space-between
|
||||
padding: 0 16px
|
||||
img,svg
|
||||
width: 16px
|
||||
width: 1em
|
||||
height: 1em
|
||||
transform: scale(1.2)
|
||||
span
|
||||
padding: 0 8px
|
||||
|
||||
|
|
|
|||
|
|
@ -20,5 +20,9 @@
|
|||
align-items: center
|
||||
.title
|
||||
txt-ellipsis()
|
||||
.icon
|
||||
svg
|
||||
flex-shrink: 0
|
||||
height: 1em
|
||||
width: auto
|
||||
transform: scale(1.2)
|
||||
|
||||
|
|
@ -11,3 +11,10 @@
|
|||
&:hover
|
||||
color: $color-hover
|
||||
border-bottom: 1px solid $color-hover
|
||||
|
||||
.widget-wrapper.markdown .linklist
|
||||
margin: 1em 0
|
||||
.link
|
||||
background: var(--alpha50)
|
||||
.link:hover
|
||||
background: var(--alpha100)
|
||||
|
|
@ -14,8 +14,9 @@
|
|||
overflow: hidden
|
||||
a.doc-tree-link
|
||||
color: var(--text-p1)
|
||||
padding: 0.5rem 16px
|
||||
padding: 0 16px
|
||||
display: flex
|
||||
min-height: 32px
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
font-size: $fs-14
|
||||
|
|
@ -23,16 +24,21 @@
|
|||
trans1 background
|
||||
.toc-text
|
||||
txt-ellipsis()
|
||||
.icon
|
||||
svg,img
|
||||
flex-shrink: 0
|
||||
width: 1em
|
||||
height: 1em
|
||||
transform: scale(1.2)
|
||||
&:after
|
||||
position: absolute
|
||||
right: .5rem
|
||||
&.active
|
||||
&:only-child
|
||||
&:only-child
|
||||
&.active
|
||||
background: var(--alpha50)
|
||||
&:hover
|
||||
background: var(--alpha100)
|
||||
&:hover
|
||||
background: var(--alpha50)
|
||||
background: var(--alpha100)
|
||||
|
||||
|
||||
// 当前分页链接
|
||||
|
|
|
|||
|
|
@ -31,17 +31,22 @@
|
|||
display: none
|
||||
.cap-action
|
||||
line-height: 0
|
||||
color: var(--text-p2)
|
||||
trans2: color background
|
||||
color: inherit
|
||||
opacity 0.6
|
||||
trans2: opacity background
|
||||
border-radius: 4px
|
||||
padding: 6px
|
||||
margin-right: -5px
|
||||
.icon
|
||||
svg
|
||||
height: 1em
|
||||
width: auto
|
||||
transform: scale(1.2)
|
||||
fill: var(--text-p2)
|
||||
&:hover
|
||||
color: $color-hover
|
||||
background: var(--alpha100)
|
||||
.icon
|
||||
opacity 1
|
||||
svg
|
||||
fill: $color-hover
|
||||
|
||||
.widget-body
|
||||
|
|
|
|||
Loading…
Reference in New Issue