hexo-theme-stellar/source/css/_layout/widgets/ghuser.styl

98 lines
2.0 KiB
Stylus

.widget-wrapper.ghuser
.widget-header+.widget-body
margin: 0.75rem 0
.widget-wrapper.ghuser .widget-body
text-align: center
background: var(--card)
border-radius: $border-card
padding: 1rem
box-shadow: $boxshadow-card
.widgets .widget-wrapper.ghuser
.avatar
display: block
border-radius: 100%
margin: 1rem auto 1.25rem auto
max-width: 75%
overflow: hidden
img
display: block
@media screen and (max-width: $device-tablet)
max-width: 50%
p.username
font-weight: 900
font-size: $fs-h2
color: var(--text-p0)
margin: 0
p.bio
font-size: $fs-13
margin: 0
.follow
font-weight: 500
border-radius: 64px
padding: 0.5rem 1rem
background: $color-theme
color: var(--card)
font-size: 1rem
align-self: stretch
text-align: center
line-height: 1.5
display: flex
align-items: center
justify-content: center
trans1: background
svg
margin-right: 6px
&:hover
background: $color-hover
.menu
margin-bottom: 0
background: none
border: 0
a
margin: 0
&.active
box-shadow: none
position: relative
background: none
&:after
content: ''
position: absolute
height: 3px
bottom: 0
width: 32px
left: 'calc(50% - 0.5 * %s)' % @width
border-radius: 4px
background: $color-theme
&:hover
box-shadow: none
background: var(--block)
.buttons
margin: 1rem 0
align-self: stretch
display: grid
grid-gap: 2px
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
.btn
display: flex
flex-direction: column
align-items: center
color: inherit
border: 1px solid transparent
border-radius: 4px
padding: 0.25rem 0
trans1: background
&:hover
background: var(--block)
.title
font-size: 1rem
font-weight: 700
.desc
font-size: $fs-12
color: var(--text-p3)
font-weight: 500