|
|
|
@ -7,6 +7,7 @@ |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
margin: -@gap/2; |
|
|
|
|
border-radius: @border_radius; |
|
|
|
|
.friend-card{ |
|
|
|
|
display: flex; |
|
|
|
|
border-radius: @border_radius; |
|
|
|
@ -15,13 +16,38 @@ |
|
|
|
|
margin: @gap/2; |
|
|
|
|
color: fade(@color_text_main, 80%); |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
align-content: flex-start; |
|
|
|
|
flex-direction: column; |
|
|
|
|
width:~"calc(100%/3 - @{gap})"; |
|
|
|
|
@media(max-width: @on_laptop){ |
|
|
|
|
width:~"calc(100%/3 - @{gap})"; |
|
|
|
|
} |
|
|
|
|
@media(max-width: @on_pad){ |
|
|
|
|
width:~"calc(100%/2 - @{gap})"; |
|
|
|
|
} |
|
|
|
|
@media(max-width: @on_phone){ |
|
|
|
|
width: 100%; |
|
|
|
|
margin: 0 @gap/4; |
|
|
|
|
border-radius: 0; |
|
|
|
|
flex-direction: row; |
|
|
|
|
&:first-child{ |
|
|
|
|
border-top-left-radius: @border_radius; |
|
|
|
|
border-top-right-radius: @border_radius; |
|
|
|
|
} |
|
|
|
|
&:last-child{ |
|
|
|
|
border-bottom-left-radius: @border_radius; |
|
|
|
|
border-bottom-right-radius: @border_radius; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&:hover{ |
|
|
|
|
text-decoration: none; |
|
|
|
|
box-shadow: @boxshadow_card_raised, 0 32px 64px 0px rgba(0, 0, 0, 0.1); |
|
|
|
|
transform: scale(1.05); |
|
|
|
|
border-radius: @border_radius; |
|
|
|
|
@media(max-width: @on_phone){ |
|
|
|
|
transform: scale(1.02); |
|
|
|
|
margin: @gap/2 0; |
|
|
|
|
} |
|
|
|
|
.friend-left{ |
|
|
|
|
.avatar{ |
|
|
|
|
transform: scale(1.1) rotate(12deg); |
|
|
|
@ -31,36 +57,54 @@ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.friend-left{ |
|
|
|
|
align-self: center; |
|
|
|
|
.avatar{ |
|
|
|
|
width: 64px; |
|
|
|
|
height: 64px; |
|
|
|
|
min-width: 64px; |
|
|
|
|
min-height: 64px; |
|
|
|
|
margin: @gap; |
|
|
|
|
margin: @gap @gap/2 @gap/2 @gap/2; |
|
|
|
|
border-radius: 100%; |
|
|
|
|
border: 1px solid white; |
|
|
|
|
box-shadow: @boxshadow_card_normal; |
|
|
|
|
@media(max-width: @on_phone){ |
|
|
|
|
margin: @gap; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.friend-right{ |
|
|
|
|
flex: 1; |
|
|
|
|
margin: @gap @gap @gap 0; |
|
|
|
|
margin: 0 @gap/2 @gap/2 @gap/2; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
text-align: center; |
|
|
|
|
p{ |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
@media(max-width: @on_phone){ |
|
|
|
|
margin: @gap @gap @gap 0; |
|
|
|
|
text-align: left; |
|
|
|
|
p{ |
|
|
|
|
text-align: left; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.friend-tags-wrapper{ |
|
|
|
|
.enable-trans(); |
|
|
|
|
margin-left: -2px; |
|
|
|
|
word-spacing: 4px; |
|
|
|
|
word-break:break-all; |
|
|
|
|
margin-bottom: @gap/2; |
|
|
|
|
@media(max-width: @on_phone){ |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
p{ |
|
|
|
|
margin: 0; |
|
|
|
|
padding: 0; |
|
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); |
|
|
|
|
&.friend-name{ |
|
|
|
|
font-size: @fontsize_base; |
|
|
|
|
font-weight: bold; |
|
|
|
|
padding-top: 4px; |
|
|
|
|
} |
|
|
|
|
&.tags{ |
|
|
|
|
font-size: @fontsize_small * 0.85; |
|
|
|
|