/* User profile /ghost/settings/users// /* ---------------------------------------------------------- */ /* 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; }