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.
94 lines
1.7 KiB
94 lines
1.7 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # User profile |
|
* |
|
* Styles for all user profile layouts |
|
* |
|
* Version: 1.1 |
|
* Latest update: Mar 6, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
// Cover image layout |
|
// ------------------------------ |
|
|
|
.profile-cover { |
|
position: relative; |
|
|
|
// Add extra spacing to navbar |
|
& + .navbar { |
|
margin-bottom: (@line-height-computed * 2); |
|
} |
|
|
|
// Cover details |
|
.media { |
|
position: absolute; |
|
bottom: @line-height-computed; |
|
left: @line-height-computed; |
|
right: @line-height-computed; |
|
|
|
.btn-default { |
|
border-color: @btn-default-bg; |
|
.box-shadow(0 0 3px fade(#000, 50%)); |
|
} |
|
} |
|
|
|
// Text styles |
|
.media-body, |
|
small { |
|
color: #fff; |
|
text-shadow: 0 0 3px fade(#000, 80%); |
|
} |
|
|
|
// Mobile view |
|
@media (max-width: @screen-xs-max) { |
|
.media { |
|
text-align: center; |
|
margin-top: 0; |
|
bottom: auto; |
|
top: (@line-height-computed * 2); |
|
} |
|
|
|
.media-left, |
|
.media-right { |
|
padding: 0; |
|
display: block; |
|
overflow-x: auto; |
|
} |
|
|
|
.media-body { |
|
display: block; |
|
margin-bottom: @line-height-computed; |
|
width: 100%; |
|
|
|
> h1 { |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
max-width: 100%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Cover image |
|
.profile-cover-img { |
|
background-position: 50% 50%; |
|
background-repeat: no-repeat; |
|
background-size: cover; |
|
height: 350px; |
|
.border-top-radius(@border-radius-base); |
|
|
|
@media (max-width: @screen-xs-max) { |
|
height: 320px; |
|
} |
|
} |
|
|
|
// User thumbnail inside cover |
|
.media .profile-thumb img { |
|
width: 100px; |
|
height: 100px; |
|
border: 3px solid #fff; |
|
.box-shadow(0 0 3px fade(#000, 50%)); |
|
}
|
|
|