Ghost/ghost/admin/app/styles/layouts/user.css

137 lines
2.4 KiB
CSS
Raw Normal View History

2015-05-14 16:45:37 +03:00
/* User profile /ghost/settings/users/<user>/
/* ---------------------------------------------------------- */
/* User actions menu
/* ---------------------------------------------------------- */
.user-actions-cog {
margin-right: 10px
2015-05-14 16:45:37 +03:00
}
.user-actions-cog svg {
height: 13px;
width: 13px;
fill: var(--midgrey);
margin-right: 0;
}
.user-actions-cog svg path {
stroke: initial;
}
2015-05-14 16:45:37 +03:00
.user-actions-menu {
top: calc(100% + 17px);
2015-05-16 14:43:12 +03:00
right: 0;
left: auto;
2015-05-14 16:45:37 +03:00
}
.user-actions-menu.fade-out {
animation-duration: 0.01s;
}
/* Layout
/* ---------------------------------------------------------- */
.content.settings-user {
padding: 0;
}
.user-cover {
display: block;
2015-05-16 14:43:12 +03:00
overflow: hidden;
margin: 0;
width: 100%;
2015-05-14 16:45:37 +03:00
height: 300px;
margin-bottom: 30px;
2015-05-14 16:45:37 +03:00
background: #fafafa no-repeat center center;
background-size: cover;
border-radius: 6px;
2015-05-14 16:45:37 +03:00
}
.user-cover-edit {
position: absolute;
top: 30px;
left: 35px;
2015-05-16 14:43:12 +03:00
z-index: 2;
2015-05-14 16:45:37 +03:00
min-height: 37px;
height: 37px;
border-width: 0;
2015-05-16 14:43:12 +03:00
background: rgba(0, 0, 0, 0.3);
2015-05-14 16:45:37 +03:00
border-radius: var(--border-radius);
2015-05-16 14:43:12 +03:00
color: rgba(255, 255, 255, 0.8);
text-shadow: none;
2015-05-14 16:45:37 +03:00
transition: color 0.3s ease, background 0.3s ease;
}
.user-cover-edit:hover {
background: rgba(0, 0, 0, 0.5);
2015-05-16 14:43:12 +03:00
color: #fff;
2015-05-14 16:45:37 +03:00
}
/* Edit user
/* ---------------------------------------------------------- */
.user-profile {
position: relative;
z-index: 1;
}
@media (max-width: 550px) {
.user-profile fieldset {
padding: 0 15px;
}
}
.user-profile textarea {
min-width: 100%;
2015-05-14 16:45:37 +03:00
}
/* Profile picture
/* ---------------------------------------------------------- */
.user-image {
position: absolute;
top: 200px;
left: 0;
2015-05-16 14:43:12 +03:00
z-index: 2;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
border-radius: 0 6px;
2015-05-16 14:43:12 +03:00
text-align: center;
2015-05-14 16:45:37 +03:00
}
.user-image .img {
display: block;
width: 100%;
height: 100%;
2015-05-14 16:45:37 +03:00
background-position: center center;
2015-05-16 14:43:12 +03:00
background-size: cover;
border-radius: 0 6px;
2015-05-14 16:45:37 +03:00
}
.user-image:hover .edit-user-image {
opacity: 1;
}
.edit-user-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
2015-05-14 16:45:37 +03:00
background: rgba(0, 0, 0, 0.5);
border-radius: 0 6px;
2015-05-14 16:45:37 +03:00
color: #fff;
text-decoration: none;
2015-05-16 14:43:12 +03:00
text-transform: uppercase;
font-size: 12px;
line-height: 100px;
2015-05-16 14:43:12 +03:00
opacity: 0;
2015-05-14 16:45:37 +03:00
transition: opacity 0.3s ease;
}