Ghost/ghost/admin/app/styles/layouts/user.css
Kevin Ansfield 2243c12aca 🐛 fix IE11 bugs and styles (#724)
closes https://github.com/TryGhost/Ghost/issues/8384

- fixes image uploads on settings/general by reverting to jQuery for triggering the file dialog because IE11 doesn't support `MouseEvent` events or have the `.closest` method on native DOM elements
- gives all SVG elements an explicit `width` and `height` - if one property is set to `auto` or not specified IE11 will treat it as 100% of the container
- fixes horizontal scroll + scrollbar on the main app viewport
2017-06-01 23:02:03 +02:00

137 lines
2.4 KiB
CSS

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