diff --git a/core/client/assets/sass/layouts/user.scss b/core/client/assets/sass/layouts/user.scss new file mode 100644 index 0000000000..6e2d43ab1a --- /dev/null +++ b/core/client/assets/sass/layouts/user.scss @@ -0,0 +1,178 @@ +// +// Users +// -------------------------------------------------- +// Slug: /ghost/settings/users/username/ +// -------------------------------------------------- + +.user-cover { + position: relative; + width: auto; + height: 300px; + margin: 0 40px; + background: #fafafa no-repeat center center; + background-size: cover; + overflow: hidden; + + @media (max-width: 900px) { + margin: 0 15px; + } + + // Gradient overlay + &:after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 110px; + @include linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) ); + } +} + +.user-cover-edit { + position: absolute; + right: 35px; + bottom: 34px; + min-height: 34px; + height: 34px; + background: rgba(0,0,0,0.3); + border-radius: 0; + color: rgba(255,255,255,0.8); + z-index: 2; + border-radius: $rounded; + @include transition( + color 0.3s ease, + background 0.3s ease + ); + @media (max-width: 1000px) { + right: 15px; + } + + &:hover { + color: #fff; + background: rgba(0,0,0,0.5); + } +} + +.user-image + .form-group { + margin-top: 155px; + max-width: 500px; + @media (min-width: 651px) and (max-width: 1000px) { + width: calc(100% - 201px); + } + @media (min-width: 651px) { + min-width: 285px; + margin-top: 0; + top: -110px; + left: 40px; + } + @media (min-width: 1001px) { + width: calc(100% - 221px); + } +} + +.user-profile { + position: relative; + top: -110px; + z-index: 1; + @media (min-width: 651px) { + padding-left: 143px; + } + + fieldset { + padding: 0 0 0 40px; + } + + textarea { + min-width: 240px; + } +} + +.user-details-top { + + @media (max-width: 650px) { + margin-bottom: 10px; + } + + @media (min-width: 651px) { + margin-bottom: 0; + padding: 0; + p { + color: #fff; + } + } + + .user-name { + border-color: #fff; + } + +} + +@media (max-width: 550px) { + .user-details-top, + .user-details-bottom { + padding-left: 15px; + padding-right: 15px; + } +} + +.user-image { + display: block; + position: relative; + width: 126px; + height: 126px; + float: left; + margin-left: 34px; + margin-right: 20px; + text-align: center; + border-radius: 100%; + overflow: hidden; + padding: 3px; + background: #fff; + z-index: 2; + + margin-left: -104px; + + @media (max-width: 550px) { + margin-left: 0px; + } + + @media (min-width: 551px) and (max-width: 650px) { + margin-left: 20px; + } + + .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 { + @include position(absolute, 3px 3px 3px 3px); + 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; + @include transition(opacity 0.3s ease); +} + +.user-details-bottom { + padding: 0 40px; + @media (min-width: 651px) { + margin: -104px 0 0 0; + } +} \ No newline at end of file diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss index 2f3b304df5..2dba1a9721 100644 --- a/core/client/assets/sass/screen.scss +++ b/core/client/assets/sass/screen.scss @@ -57,5 +57,6 @@ @import "layouts/post-settings-menu"; @import "layouts/settings"; @import "layouts/users"; +@import "layouts/user"; @import "layouts/about"; @import "layouts/error"; \ No newline at end of file