This repository has been archived on 2024-06-26. You can view files and clone it, but cannot push or open issues or pull requests.
sakura/resources/assets/less/yuuno/bem/profile.less

193 lines
3.9 KiB
Text
Raw Normal View History

2016-11-09 18:32:23 +00:00
.profile {
background: rgba(211, 191, 255, .8) !important;
&__header {
height: 200px;
background: no-repeat center center / cover transparent;
width: 100%;
align-items: center;
border-bottom: 1px solid #9475b2;
}
&__info {
height: 100%;
width: 100%;
background: linear-gradient(0deg, rgba(211, 191, 255, .8), rgba(211, 191, 255, .8) 52px, transparent 52px, transparent);
width: 100%;
display: flex;
align-items: center;
@media (max-width: 1064px) {
background: rgba(211, 191, 255, .5);
flex-flow: column;
}
}
&__avatar {
height: 190px;
width: 190px;
margin: 0 2px;
flex-grow: 0;
flex-shrink: 0;
@media (max-width: 1064px) {
height: 120px;
width: 120px;
margin: 2px;
}
}
&__username {
align-self: flex-end;
margin-left: 4px;
}
&__dates {
font-size: .8em;
line-height: 1.4em;
text-align: right;
align-self: flex-end;
flex-grow: 5;
height: 45px;
@media (max-width: 500px) {
display: none;
}
}
@media (max-width: 1064px) {
&__username,
&__dates {
flex-grow: 6;
width: 100%;
text-align: center;
}
&__date {
display: inline-block;
&:not(:first-child) {
padding-left: 8px;
}
}
}
&__interactions {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 2.5em;
line-height: 1.4em;
border-bottom: 1px solid #9475b2;
&-item {
color: #8364A1;
text-decoration: none !important;
text-shadow: 0 0 2px #9475B2;
transition: all .2s;
&:hover {
text-shadow: 0 0 6px #9475B2;
}
&:active {
color: #725390;
text-shadow: 0 0 8px #8364A1;
}
}
@media (max-width: 1064px) {
flex-flow: column;
}
}
&__navigation {
margin-left: 5px;
}
&__actions {
border-left: 1px solid #9475b2;
min-width: 345px;
text-align: right;
margin-right: 5px;
}
@media (max-width: 1064px) {
&__navigation,
&__actions {
border: 0;
width: 100%;
text-align: center;
margin: 0;
}
}
&__content {
display: flex;
justify-content: space-between;
@media (max-width: 1064px) {
flex-flow: column-reverse;
}
}
&__data {
display: block;
width: 350px;
border-left: 1px solid #9475b2;
flex-shrink: 0;
text-align: center;
@media (max-width: 1064px) {
width: 100%;
border-bottom: 1px solid #9475b2;
border-left: 0;
}
}
&__mode {
width: 100%;
flex-grow: 0;
margin-right: 2px;
overflow: auto;
&-title {
padding-bottom: 2px;
border-bottom: 1px solid #9475b2;
margin-bottom: 2px;
}
@media (max-width: 1064px) {
margin: 0;
}
}
&__now-playing {
text-shadow: 0 0 5px #8364A1;
color: #614390;
text-align: center;
font-size: 1.2em;
line-height: 1.5em;
border-bottom: 1px solid #9475b2;
display: flex;
justify-content: space-between;
&-link {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
&__friends {
text-align: center;
&--none {
margin: 2em auto;
}
}
}