.contactdetails__header {
height: 100px;
padding-left: 20px;
display: flex;
color: #fff;
font-weight: bold;
align-items: center;
}
.contactdetails__header #details-contact-infos {
width: 80%;
margin: 2px 6px 0px;
flex-grow: 1;
}
.contactdetails__header h2 {
margin: 0;
}
.contactdetails__header #details-org-container {
display: flex;
flex-wrap: wrap;
}
.contactdetails__header input[type=text]:active {
background: transparent !important; /* remove :active effect */
}
.contactdetails__header .contactdetails__name,
.contactdetails__header .contactdetails__org,
.contactdetails__header .contactdetails__title {
font-size: inherit;
color: #fff !important; /* override focus,active&hover */
background: transparent;
border: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 100%;
margin: 0;
padding: 4px 5px;
}
.contactdetails__header .contactdetails__org,
.contactdetails__header .contactdetails__title {
max-width: 50%;
min-width: 150px;
}
.contactdetails__header .contactdetails__name {
width: 100%;
}
.contactdetails__header #details-actions {
display: flex;
flex-shrink: 0;
}
.contactdetails__header #contact-failed-save {
animation: pulse 1.5s infinite;
border-radius: 50%;
}
/* fix placeholder color */
.contactdetails__header .contactdetails__name::-webkit-input-placeholder,
.contactdetails__header .contactdetails__org::-webkit-input-placeholder,
.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #fff;
opacity: .8;
}
.contactdetails__header .contactdetails__name::-moz-placeholder,
.contactdetails__header .contactdetails__org::-moz-placeholder,
.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
opacity: .8;
}
.contactdetails__header .contactdetails__name:-ms-input-placeholder,
.contactdetails__header .contactdetails__org:-ms-input-placeholder,
.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
opacity: .8;
}
.contactdetails__header .contactdetails__name:placeholder-shown,
.contactdetails__header .contactdetails__org:placeholder-shown,
.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #fff;
opacity: .8;
}
.contactdetails__header #details-actions a,
.contactdetails__header #details-actions button {
padding: 15px;
background-color: transparent;
border: none;
opacity: .5;
margin: 3px;
}
.contactdetails__header #details-actions a:hover,
.contactdetails__header #details-actions button:hover,
.contactdetails__header #details-actions a:focus,
.contactdetails__header #details-actions button:focus {
opacity: .7
}
avatar {
position: relative;
height: 75px;
width: 75px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.contactdetails__logo {
height: 75px;
width: 75px;
object-fit: cover;
background-color: transparent;
margin: 0;
cursor: pointer;
}
.avatar-options {
top: 0;
background-color: rgba(0,0,0,0.2);
display: none;
width: 100%;
height: 100%;
overflow: hidden;
}
.avatar-options > [class^="icon-"] {
display: none;
opacity: 0.5;
cursor: pointer;
min-width: 20px;
min-height: 20px;
}
.avatar-options:hover > [class^="icon-"] {
opacity: 0.6;
}
.avatar-options > [class^="icon-"]:hover {
opacity: 0.8;
}
avatar.avatar--missing .avatar-options {
display: flex;
border-radius