You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.6 KiB
92 lines
2.6 KiB
.article.typo.l_friends{ |
|
.friends-group{ |
|
.friend-content{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin: -@gap/2; |
|
border-radius: @border_radius; |
|
align-items: flex-start; |
|
.friend-card{ |
|
display: flex; |
|
border-radius: @border_radius/4; |
|
box-shadow: @boxshadow_card_normal; |
|
padding: @gap/2 0; |
|
margin: @gap/2; |
|
margin-top: ~"calc(@{gap}*1.25 + 32px)"; |
|
color: fade(@color_text_main, 80%); |
|
background: darken(@color_bg_code_block, 10%); |
|
justify-content: flex-start; |
|
align-content: flex-start; |
|
flex-direction: column; |
|
width:~"calc(100%/4 - @{gap})"; |
|
@media(max-width: @on_laptop){ |
|
width:~"calc(100%/4 - @{gap})"; |
|
} |
|
@media(max-width: @on_pad){ |
|
width:~"calc(100%/3 - @{gap})"; |
|
} |
|
@media(max-width: @on_phone){ |
|
width:~"calc(100%/2 - @{gap})"; |
|
} |
|
&:hover{ |
|
text-decoration: none; |
|
transform: scale(1.05); |
|
border-radius: @border_radius/2; |
|
.friend-left{ |
|
.avatar{ |
|
transform: scale(1.2) rotate(12deg); |
|
box-shadow: @boxshadow_card_raised; |
|
} |
|
} |
|
} |
|
.friend-left{ |
|
display: flex; |
|
align-self: center; |
|
.avatar{ |
|
width: 64px; |
|
height: 64px; |
|
.enable-trans(); |
|
box-shadow: @boxshadow_card_normal; |
|
margin: @gap @gap/2 @gap/4 @gap/2; |
|
margin-top: ~"calc(-@{gap}*1.25 - 32px)"; |
|
border-radius: 100%; |
|
border: 2px solid white; |
|
background: white; |
|
} |
|
} |
|
.friend-right{ |
|
margin: @gap/4 @gap/2; |
|
display: flex; |
|
flex-direction: column; |
|
text-align: center; |
|
p{ |
|
text-align: center; |
|
} |
|
.friend-tags-wrapper{ |
|
.enable-trans(); |
|
margin-left: -2px; |
|
word-break:break-all; |
|
line-height: @fontsize_footnote; |
|
} |
|
p{ |
|
margin: 0; |
|
&.friend-name{ |
|
font-family: @fontfamily_logo; |
|
font-size: @fontsize_small; |
|
line-height: @fontsize_small*1.5; |
|
padding-top: 4px; |
|
font-weight: bold; |
|
} |
|
&.tags{ |
|
font-size: @fontsize_footnote; |
|
display: inline; |
|
background: none; |
|
word-wrap: break-word; |
|
padding-right: 4px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}
|
|
|