linagora-rse/modules/linagora.esn.profile/frontend/app/app.less

Linagora RSE

#profile-main {

  .profile-overview .po-information button {
    background-color: @m-white;
    color: @text-color;

    i {
      display: none;
    }

    span {
      font-weight: 600;
    }
  }

  min-height: 600px;
  margin-top: 0;

  @media (min-width: @screen-md-min) {
    margin-top: 15px;
  }

  .pmo-block {
    text-align: center;

    .btn {
      .mdi {
        padding-right: 3px;
      }
    }
  }

  .follow-card, .follow-button {
    display: inline;
  }

  .profile-user-actions {
    display: inline;

    button {
      margin-left: 10px;
    }
  }
}
.modal-profile-avatar {
  .select-image {
    display: flex;
    justify-content: center;
    padding: 0 10px;

    input {
      opacity: 0;
      position: absolute;
      top: 0;
      right: 0;
      min-height: 100%;
      min-width: 100%;
    }
  }
}

.edit-profile {
  .header-label {
    color: @m-gray;
    font-size: 18px;
    margin: 0;
    padding: 0;
  }
}

#profile-main .pmo-pic {
  margin: 0 !important; // override material admin (20)
}

.profile-overview {
  .edit-h {
    position: absolute;
    cursor: pointer;
    right: 0;
    bottom: 0;
    left: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    text-align: center;
    border-radius: 0 0 3px 3px;
    padding: 10px 10px 11px;
    .transition(opacity);
    .transition-duration(250ms);
    margin-top: 20px;
    &.lv-img-sm {
      margin-top: 0px;
    }
    &:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    i {
      font-size: 18px;
      vertical-align: middle;
      margin-top: -3px;
    }
  }

  .po-card {
    .flex;
    align-items: stretch;
    flex-direction: column;
    .po-card-image img {
      align-self: center;
      width: 100%;
    }
    .po-card-text {
      background-color: @m-amber;
      padding: 10px;
      text-align: center;
      .po-displayname {
        display: block;
        a {
          .h3;
          color: white;
        }
      }
    }

    .avatar-with-bubble i {
      font-size: 20px;
    }
  }
  .po-information {
    text-align: center;
    margin-bottom: 15px;

    .follow-card,
    .follow-button,
    .profile-user-actions {
      display: inline;
    }

    .profile-user-actions button {
      margin-left: 10px;
    }
  }
}

dl {
  height: 2em;
  dd {
    & > a.edit-hint {
      display: none;
      background-color: @lightPrimaryColor;
      color: @text-color;
      padding: 2px;
      border: 1px solid @lightPrimaryColor;
    }

    & > span {
      border: 1px solid transparent;
      padding: 2px;
    }
  }

  dd:hover {
    & > span {
    border: 1px solid @lightPrimaryColor;
    padding: 2px;
    }

    & > a.edit-hint {
    display: inline;
    }
  }

  form.editable-wrap {
    .custom-input-sm {
      height: 1.7em;
      border: 1px solid @lightPrimaryColor;
      padding: 2px;
      color: @text-color;
    }

    .custom-input-sm:focus {
      border: 1px solid @lightPrimaryColor;
    }

    .editable-buttons {
      & > button {
        &.btn:not(.btn-link):not(.btn-float):not(.command-edit):not(.command-delete):not(.selectpicker) {
          background: transparent;
          box-shadow: none;
          padding: 0;
          margin: 0;
          color: @text-color;
        }

        & > span {
          height: 1.7em;
          line-height: 1.7em;
          vertical-align: middle;
          background-color: @lightPrimaryColor;
          color: @text-color;
          padding: 0 2px;
          margin-top: -1px;
          border: 1px solid @lightPrimaryColor;
        }
      }
    }
  }
}

@media (max-width: @screen-xs-max) {
  .modal-profile-avatar {
    width: 100vw;
  }

  .profile-overview .po-card .avatar-with-bubble {
    padding: 20px;
  }
}