2014-08-26 14:11:38 +04:00
|
|
|
//
|
|
|
|
// Users
|
|
|
|
// --------------------------------------------------
|
|
|
|
// Slug: /ghost/settings/users/username/
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
2014-09-26 15:56:14 +04:00
|
|
|
.content.settings-user {
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
@media (min-width: 901px) {
|
|
|
|
padding: 0 40px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-09-04 18:03:07 +04:00
|
|
|
.user-actions-cog {
|
|
|
|
padding: 9px 11px;
|
|
|
|
}
|
|
|
|
|
2014-08-26 14:11:38 +04:00
|
|
|
.user-cover {
|
|
|
|
position: relative;
|
|
|
|
width: auto;
|
|
|
|
height: 300px;
|
2014-09-26 15:56:14 +04:00
|
|
|
margin: 0;
|
2014-08-26 14:11:38 +04:00
|
|
|
background: #fafafa no-repeat center center;
|
|
|
|
background-size: cover;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
@media (max-width: 900px) {
|
2014-09-04 18:03:07 +04:00
|
|
|
margin: 0;
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
// Gradient overlay
|
|
|
|
&:after {
|
|
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
height: 110px;
|
2014-08-26 14:56:02 +04:00
|
|
|
background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) );
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-cover-edit {
|
|
|
|
position: absolute;
|
|
|
|
right: 35px;
|
2014-09-04 18:03:07 +04:00
|
|
|
bottom: 29px;
|
|
|
|
min-height: 37px;
|
|
|
|
height: 37px;
|
2014-08-26 14:11:38 +04:00
|
|
|
background: rgba(0,0,0,0.3);
|
|
|
|
color: rgba(255,255,255,0.8);
|
|
|
|
z-index: 2;
|
2014-09-04 18:03:07 +04:00
|
|
|
border-width: 0;
|
2014-08-26 14:11:38 +04:00
|
|
|
border-radius: $rounded;
|
2014-08-26 14:56:02 +04:00
|
|
|
transition: color 0.3s ease, background 0.3s ease;
|
2014-08-26 14:11:38 +04:00
|
|
|
@media (max-width: 1000px) {
|
|
|
|
right: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: #fff;
|
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-image + .form-group {
|
|
|
|
max-width: 500px;
|
|
|
|
@media (min-width: 651px) and (max-width: 1000px) {
|
|
|
|
width: calc(100% - 201px);
|
|
|
|
}
|
|
|
|
@media (min-width: 651px) {
|
|
|
|
min-width: 285px;
|
|
|
|
left: 40px;
|
|
|
|
}
|
|
|
|
@media (min-width: 1001px) {
|
2014-09-26 15:56:14 +04:00
|
|
|
width: calc(100% - 181px);
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-profile {
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
@media (min-width: 651px) {
|
|
|
|
padding-left: 143px;
|
|
|
|
}
|
|
|
|
|
|
|
|
fieldset {
|
2014-09-04 18:03:07 +04:00
|
|
|
@media (max-width: 650px) {
|
|
|
|
padding: 0 40px;
|
|
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
|
|
padding: 0 15px;
|
|
|
|
}
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
min-width: 240px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-details-top {
|
|
|
|
|
2014-09-17 16:48:36 +04:00
|
|
|
position: relative;
|
|
|
|
|
2014-08-26 14:11:38 +04:00
|
|
|
@media (max-width: 650px) {
|
2014-09-17 16:48:36 +04:00
|
|
|
margin-top: 40px;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
@media (min-width: 651px) {
|
|
|
|
margin-top: -91px;
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: 651px) {
|
|
|
|
margin-bottom: 0;
|
|
|
|
padding: 0;
|
|
|
|
p {
|
|
|
|
color: #fff;
|
|
|
|
}
|
2014-09-17 16:48:36 +04:00
|
|
|
label[for="user-name"] {
|
|
|
|
color: transparent;
|
|
|
|
}
|
2014-09-04 18:03:07 +04:00
|
|
|
.user-name {
|
|
|
|
border-color: #fff;
|
|
|
|
}
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
|
2014-09-04 18:03:07 +04:00
|
|
|
@media (min-width: 901px) {
|
|
|
|
.user-name {
|
|
|
|
width: calc(100% - 20px);
|
|
|
|
}
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.user-image {
|
|
|
|
display: block;
|
2014-09-17 16:48:36 +04:00
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
@media (min-width: 651px) {
|
|
|
|
top: -19px;
|
|
|
|
left: -98px;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 650px) {
|
|
|
|
top: -159px;
|
2014-09-26 15:56:14 +04:00
|
|
|
left: 21px;
|
2014-09-17 16:48:36 +04:00
|
|
|
}
|
|
|
|
|
2014-08-26 14:11:38 +04:00
|
|
|
width: 126px;
|
|
|
|
height: 126px;
|
|
|
|
float: left;
|
2014-09-26 15:56:14 +04:00
|
|
|
margin-left: -6px;
|
2014-08-26 14:11:38 +04:00
|
|
|
margin-right: 20px;
|
|
|
|
text-align: center;
|
|
|
|
border-radius: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 3px;
|
|
|
|
background: #fff;
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
.img {
|
|
|
|
display: block;
|
|
|
|
width: 120px;
|
|
|
|
height: 120px;
|
|
|
|
background-size: cover;
|
|
|
|
background-position: center center;
|
|
|
|
border-radius: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.edit-user-image {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.edit-user-image {
|
2014-08-26 14:56:02 +04:00
|
|
|
position: absolute;
|
|
|
|
top: 3px;
|
|
|
|
right: 3px;
|
|
|
|
bottom: 3px;
|
|
|
|
left: 3px;
|
2014-08-26 14:11:38 +04:00
|
|
|
border-radius: 100%;
|
|
|
|
width: calc(100% - 6px);
|
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
|
opacity: 0;
|
|
|
|
color: #fff;
|
|
|
|
line-height: 120px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
text-decoration: none;
|
2014-08-26 14:56:02 +04:00
|
|
|
transition: opacity 0.3s ease;
|
2014-08-26 14:11:38 +04:00
|
|
|
}
|