8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 578: | Linha 578: | ||
/* Testes */ | /* Testes */ | ||
.post{ | |||
width: 100%; | |||
height: auto; | |||
background: #fff; | |||
border: 1px solid #dfdfdf; | |||
margin-top: 40px; | |||
} | |||
.info{ | |||
width: 100%; | |||
height: 60px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0 20px; | |||
} | |||
.info .username{ | |||
width: auto; | |||
font-weight: bold; | |||
color: #000; | |||
font-size: 14px; | |||
margin-left: 10px; | |||
} | |||
.info .options{ | |||
height: 10px; | |||
cursor: pointer; | |||
} | |||
. | .info .user{ | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
} | |||
.info .profile-pic{ | |||
height: 40px; | |||
width: 40px; | |||
padding: 0; | |||
background: none; | |||
} | |||
.info .profile-pic img{ | |||
border: none; | |||
} | |||
.post-image{ | |||
width: 100%; | |||
height: 500px; | |||
object-fit: cover; | |||
} | |||
.post-content{ | |||
width: 100%; | |||
padding: 20px; | padding: 20px; | ||
} | } | ||
. | .likes{ | ||
margin- | font-weight: bold; | ||
} | |||
.description{ | |||
margin: 10px 0; | |||
font-size: 14px; | |||
line-height: 20px; | |||
} | |||
.description span{ | |||
font-weight: bold; | |||
margin-right: 10px; | |||
} | |||
.post-time{ | |||
color: rgba(0, 0, 0, 0.5); | |||
font-size: 12px; | |||
} | |||
.comment-wrapper{ | |||
width: 100%; | |||
height: 50px; | |||
border-radius: 1px solid #dfdfdf; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.comment-wrapper .icon{ | |||
height: 30px; | |||
} | |||
.comment-box{ | |||
width: 80%; | |||
height: 100%; | |||
border: none; | |||
outline: none; | |||
font-size: 14px; | |||
} | |||
.comment-btn, | |||
.action-btn{ | |||
width: 70px; | |||
height: 100%; | |||
background: none; | |||
border: none; | |||
outline: none; | |||
text-transform: capitalize; | |||
font-size: 16px; | |||
color: rgb(0, 162, 255); | |||
opacity: 0.5; | |||
} | } | ||
. | .reaction-wrapper{ | ||
width: 100%; | width: 100%; | ||
height: 50px; | |||
display: flex; | |||
margin-top: -20px; | |||
align-items: center; | |||
} | |||
.reaction-wrapper .icon{ | |||
height: 25px; | |||
margin: 0; | |||
margin-right: 20px; | |||
} | |||
.reaction-wrapper .icon.save{ | |||
margin-left: auto; | |||
} | } |