xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[opt] css

This commit is contained in:
xaoxuu 2022-11-23 23:17:24 +08:00
parent 670014ca4a
commit 6413320bd0
16 changed files with 292 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
layout/_partial/widgets/recent.ejs
View File

@ -33,10 +33,9 @@ function layoutDiv() {
el += '<span class="title">'
if (post.layout == 'wiki') {
let proj = theme.wiki.projects[post.wiki];
if (proj && proj.name) {
el += proj.name + ' / ';
} else if (post.wiki) {
el += post.wiki + ' / ';
let name = proj?.name || post?.wiki;
if (name) {
el += '<strong>' + name + '</strong>' + '<span class="dot"></span>';
}
}
el += (post.title || post.seo_title || post.wiki) + '</span>';

1
source/css/_common/span.styl
View File

@ -3,6 +3,7 @@ span.dot,span.sep
margin: 0 .25em
span.dot:before
content: '·'
font-weight: 900
span.sep:before
content: '/'
padding-left: 2px

19
source/css/_layout/partial/related.styl
View File

@ -31,19 +31,11 @@
color: var(--text-p1)
font-weight: 500
font-size: 1rem
trans1 color
trans2 color border
position: relative
padding-bottom: 4px
&:after
content: ''
position: absolute
left: 0
width: 0
height: 2px
bottom: 0
border-radius: 2px
background: $color-hover
trans1 width
padding-bottom: 2px
border-bottom: 1px dashed var(--text-meta)
line-height: 1.6
.excerpt
color: var(--text-p3)
font-size: $fs-12
@ -55,8 +47,7 @@
&:hover
.title
color: $color-hover
&:after
width: 100%
border-bottom: 1px solid $color-hover
.related-wrap#read-next

4
source/css/_layout/sidebar/footer.styl
View File

@ -1,7 +1,5 @@
.l_left>.footer
margin: 0.5rem var(--gap-l) 0
@media screen and (max-width: $device-tablet)
margin-bottom: 1rem
margin: 0.5rem var(--gap-l) 1rem
.social-wrap
display: grid

111
source/css/_layout/sidebar/header.styl Normal file
View File

@ -0,0 +1,111 @@
.l_left nav.menu
margin-bottom: 1.5rem
nav.menu
margin: 1rem 0
background: var(--block)
border-radius: 6px
display: flex
padding: 1px
flex-wrap: wrap
&::-webkit-scrollbar
display: none
&::-webkit-scrollbar-track-piece
background: transparent
&::-webkit-scrollbar-thumb
display: none
a.nav-item
text-overflow: ellipsis
word-break: keep-all
margin: 1px
border-radius: 4px
font-size: $fs-14
font-weight: 500
overflow: hidden
padding: 0.375rem 0.5rem
color: var(--text-p3)
text-align: center
&.active, &:hover
color: var(--text-p1)
background: var(--card)
box-shadow: $boxshadow-button
.l_left .menu a.nav-item
flex-grow: 1
.logo-wrap
display: flex
align-items: center
overflow: hidden
a
color: inherit
display: flex
align-items: center
a.avatar
display: block
position: relative
width: 50px
height: 50px
flex-shrink: 0
border-radius: 50px
overflow: hidden
margin-right: 1rem
div.bg
width: 100%
height: 100%
background-size: cover
img.avatar
margin: 2px
object-fit: cover
width: "calc(100% - 2 * %s)" % @margin
height: "calc(100% - 2 * %s)" % @margin
border-radius: @width
if hexo-config('style.animated_avatar.animate')
div.bg
trans1: opacity
position: absolute
opacity: 0 !important
z-index: -1
@keyframes spin
from
transform:rotate(0deg)
to
transform:rotate(360deg)
if hexo-config('style.animated_avatar.animate') == 'always'
div.bg
opacity: 1 !important
animation: spin infinite 4s
animation-timing-function: linear
if hexo-config('style.animated_avatar.animate') == 'auto'
&:hover
div.bg
opacity: 1 !important
animation: spin infinite 4s
animation-timing-function: linear
a.title
font-size: 1.75rem
font-weight: 900
color: inherit
line-height: 1.2
display: block
position: relative
.main
color: var(--text-p0)
.sub
color: var(--text-p1)
trans2 opacity transform
white-space: nowrap
.hover
position: absolute
bottom: 0
transform: translateY(8px)
overflow: visible
&:hover
.normal
opacity: 0
transform: translateY(-8px)
.hover
transform: translateY(0)
opacity: 1 !important

115
source/css/_layout/sidebar/sidebar.styl
View File

@ -3,7 +3,7 @@
flex-direction: column
word-break: break-all
text-align: justify
height: "calc(100vh - 1 * %s)" % var(--gap-l)
height: 100vh
.header
margin: var(--gap-l) var(--gap-l) 0
margin-top: "calc(2 * %s)" % var(--gap-l)
@ -14,7 +14,6 @@
height: 100vh
.l_left[layout=wiki]
padding-bottom: 0
height: 100vh
@ -24,83 +23,6 @@
margin-bottom: 6rem
.logo-wrap
display: flex
align-items: center
overflow: hidden
a
color: inherit
display: flex
align-items: center
a.avatar
display: block
position: relative
width: 50px
height: 50px
flex-shrink: 0
border-radius: 50px
overflow: hidden
margin-right: 1rem
div.bg
width: 100%
height: 100%
background-size: cover
img.avatar
margin: 2px
object-fit: cover
width: "calc(100% - 2 * %s)" % @margin
height: "calc(100% - 2 * %s)" % @margin
border-radius: @width
if hexo-config('style.animated_avatar.animate')
div.bg
trans1: opacity
position: absolute
opacity: 0 !important
z-index: -1
@keyframes spin
from
transform:rotate(0deg)
to
transform:rotate(360deg)
if hexo-config('style.animated_avatar.animate') == 'always'
div.bg
opacity: 1 !important
animation: spin infinite 4s
animation-timing-function: linear
if hexo-config('style.animated_avatar.animate') == 'auto'
&:hover
div.bg
opacity: 1 !important
animation: spin infinite 4s
animation-timing-function: linear
a.title
font-size: 1.75rem
font-weight: 900
color: inherit
line-height: 1.2
display: block
position: relative
.main
color: var(--text-p0)
.sub
color: var(--text-p1)
trans2 opacity transform
white-space: nowrap
.hover
position: absolute
bottom: 0
transform: translateY(8px)
overflow: visible
&:hover
.normal
opacity: 0
transform: translateY(-8px)
.hover
transform: translateY(0)
opacity: 1 !important
.l_left .widgets .widget-wrapper.logo-wrap.wiki
margin-bottom: 1.5rem
flex-direction: column
@ -114,38 +36,3 @@
color: $color-hover
filter: unset !important
.l_left nav.menu
margin-bottom: 1.5rem
nav.menu
margin: 1rem 0
background: var(--block)
border-radius: 6px
display: flex
padding: 1px
flex-wrap: wrap
&::-webkit-scrollbar
display: none
&::-webkit-scrollbar-track-piece
background: transparent
&::-webkit-scrollbar-thumb
display: none
a.nav-item
text-overflow: ellipsis
word-break: keep-all
margin: 1px
border-radius: 4px
font-size: $fs-14
font-weight: 500
overflow: hidden
padding: 0.375rem 0.5rem
color: var(--text-p3)
text-align: center
&.active, &:hover
color: var(--text-p1)
background: var(--card)
box-shadow: $boxshadow-button
.l_left .menu a.nav-item
flex-grow: 1

4
source/css/_layout/widgets/ghrepo.styl
View File

@ -1,6 +1,5 @@
.widget-wrapper.ghrepo
.widget-body
a.repo
.repo
display: block
padding: 0.75rem 0.5rem
color: var(--text-p2)
@ -15,7 +14,6 @@
&:hover
box-shadow: $boxshadow-card-float
transform: translateY(-1px)
a.repo
svg
margin-right: 4px
.flex-row

23
source/css/_layout/widgets/ghuser.styl
View File

@ -8,7 +8,8 @@
padding: 1rem
box-shadow: $boxshadow-card
.widget-wrapper.ghuser .widget-body .avatar
.widget-wrapper.ghuser
.avatar
display: block
border-radius: 100%
margin: 1rem auto 1.25rem auto
@ -19,17 +20,17 @@
@media screen and (max-width: $device-tablet)
max-width: 50%
.widget-wrapper.ghuser .widget-body .username
.username
font-weight: 900
font-size: $fs-h2
color: var(--text-p0)
margin: 0.5rem 0
.widget-wrapper.ghuser .widget-body .bio
.bio
font-size: $fs-13
margin: 0.5rem 0
.widget-wrapper.ghuser .widget-body .follow
.follow
font-weight: 500
border-radius: 64px
padding: 0.5rem 1rem
@ -48,7 +49,7 @@
&:hover
background: $color-hover
.widget-wrapper.ghuser .widget-body .menu
.menu
margin-bottom: 0
background: none
a:hover
@ -67,14 +68,14 @@
border-radius: 4px
background: $color-theme
.widget-wrapper.ghuser .widget-body .buttons
.buttons
margin: 1rem 0
align-self: stretch
display: grid
grid-gap: 2px
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
.widget-wrapper.ghuser .widget-body .btn
.btn
display: flex
flex-direction: column
align-items: center
@ -85,14 +86,10 @@
trans1: background
&:hover
background: var(--block)
.widget-wrapper.ghuser .widget-body .buttons .btn .title
.title
font-size: 1rem
font-weight: 700
.widget-wrapper.ghuser .widget-body .buttons .btn .desc
.desc
font-size: $fs-12
color: var(--text-p3)
font-weight: 500

15
source/css/_layout/widgets/recent.styl Normal file
View File

@ -0,0 +1,15 @@
.widget-wrapper.recent .widget-body
display: flex
flex-direction: column
align-items: flex-start
margin-top: 0.25rem
a
line-height: 1.2
font-size: $fs-13
margin: 0.25rem 0
.title
font-size: $fs-13
color: var(--text-p2)
&:hover
color: $color-hover

8
source/css/_layout/widgets/related.styl Normal file
View File

@ -0,0 +1,8 @@
.widget-wrapper.related .widget-body a
margin-top: 0.5rem
margin-bottom: 1rem
.title
font-weight: 700
font-size: $fs-14
.excerpt
-webkit-line-clamp: 3

8
source/css/_layout/widgets/tagcloud.styl Normal file
View File

@ -0,0 +1,8 @@
.widget-wrapper.tagcloud .widget-body
margin-top: 0.25rem
a
word-break: break-word
color: var(--text-p2)
line-height: 1.5
&:hover
color: $color-hover

17
source/css/_layout/widgets/timeline.styl Normal file
View File

@ -0,0 +1,17 @@
.widget-wrapper.timeline
.widget-body
margin-top: 0.5rem
.tag-plugin.timeline .timenode
.header
margin-bottom: 0.5rem
txt-ellipsis()
.user-info
background: var(--block)
&:hover
background: $color-hover
color: var(--card)
&:before
display: none
&+.timenode
margin-top: 0.75rem

9
source/css/_layout/widgets/toc_common.styl
View File

@ -1,10 +1,13 @@
.widget-wrapper.toc .widget-header
margin-top: 1rem
.widget-wrapper.toc.single .widget-header
font-weight: 500
font-size: $fs-12
>span
margin: 0.5rem 0
.toc .widget-body
.widget-wrapper.toc .widget-body
margin-top: 0
ul ul, ul ol
padding-left: 0
@ -34,7 +37,7 @@
padding-left: 2.9rem
.toc .toc-item
.widget-wrapper.toc .toc-item
color: var(--text-p2)
font-size: $fs-12
padding: 0
@ -44,7 +47,7 @@
border-left-color: @color
.toc-child .toc-item
padding: 0
.toc a.toc-link
.widget-wrapper.toc a.toc-link
color: inherit
display: block
line-height: 1.2

4
source/css/_layout/widgets/toc_wiki.styl
View File

@ -1,7 +1,3 @@
.widget-wrapper.toc
.widget-header
margin-top: 1rem
.widget-wrapper.toc.multi .widget-header
color: var(--text-p1)
font-size: $fs-14

58
source/css/_layout/widgets/widgets.styl
View File

@ -1,7 +1,8 @@
.widgets .loading-wrap
.widgets
.loading-wrap
margin: 0.5rem 0
.l_left .widgets
.widgets
overflow: scroll
flex-grow: 1
scrollbar-width: none
@ -9,6 +10,7 @@
z-index: 1
line-height: 1.2
.widget-wrapper
display: block
margin: 1rem 0 2rem
.widget-header
padding-left: var(--gap-l)
@ -52,55 +54,3 @@
margin-top: 0
.widget-wrapper+.widget-wrapper .widget-header
margin-top: 3rem
.l_left .widgets
.widget-wrapper.recent .widget-body
display: flex
flex-direction: column
align-items: flex-start
margin-top: 0.25rem
a
line-height: 1.2
font-size: $fs-13
margin: 0.25rem 0
padding: 2px 0
.title
font-size: $fs-13
color: var(--text-p2)
&:hover
color: $color-hover
.widget-wrapper.related .widget-body a
margin-top: 0.5rem
margin-bottom: 1rem
.title
font-weight: 700
font-size: $fs-14
.excerpt
-webkit-line-clamp: 3
.widget-wrapper.tagcloud .widget-body
margin-top: 0.25rem
a
word-break: break-word
color: var(--text-p2)
line-height: 1.5
&:hover
color: $color-hover
.widget-wrapper.timeline .widget-body
margin-top: 0.5rem
.tag-plugin.timeline .timenode
.header
margin-bottom: 0.5rem
txt-ellipsis()
.user-info
background: var(--block)
&:hover
background: $color-hover
color: var(--card)
&:before
display: none
&+.timenode
margin-top: 0.75rem