linagora-rse/modules/linagora.esn.contact/frontend/css/styles.less

Linagora RSE

@import '../../../../frontend/components/material-admin/less/inc/contacts';

@contact-header-color: @darkPrimaryColor;
@contact-toolbar-item-height: 35px;
@contact-card-display-image-size: 96px;
@full-size-avatar-max-resolution: 450px;
@contact-mobile-fn-color: @m-white;
@contact-mobile-fn-background: @m-amber;
@contact-mobile-fn-size: 20pt;
@contact-mobile-font-size: 16px;
@contact-item-action-color: @secondaryTextColor;
@contact-mobile-title-color: lighten(@text-color, 50%);
@contact-mobile-title-font-size: @contact-mobile-font-size + 1;
@contact-search-form-bg-color: @body-bg;
@avatar-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.20);
@contact-tag-border-radius: 16px;
@contact-tag-padding: 5px 8px;

@import './header';
@import './search';
@import './sidebar';
@import './overlayicon';

#profile-main {

  dl {
    height: inherit;
    dd {
     .break-word;
      white-space: pre-line;
    }
  }

  .tag-item {
    background-color: @m-blue;
    color: @m-white;
    margin-top: 2px;
    margin-right: 4px;
    margin-bottom: 2px;
    padding: @contact-tag-padding;
    float: left;
    list-style: none;
    .break-word;
    max-width: 100%;
  }
  ul.tag-list {
    padding: 0;
  }
}

ul.dropdown {
  z-index: 6;
}

.contact-field-label {
  padding-top: 20px;
  color: @gray-base;
}

.contact-addressbook-selector > * {
  padding: 0;
}

.contact-buttons {
  padding: 18px;
  float: right;

  button {
    margin-right: 5px;
  }
}

.contact-body {
  min-height: 500px;
}

.contact-header {
  background-color: @body-bg;
  padding: 0 10px 0 10px;

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

.contact-content.visible-xs {

  min-height: 100vh;
  background-color: @m-white;

  .contact-avatar {
    img {
      width: 100%;
    }
  }
}

@media(min-width: @full-size-avatar-max-resolution) {
  .contact-content.visible-xs {
    .contact-avatar {
      margin: auto;
      width: @full-size-avatar-max-resolution;
      & > img, .mdi {
        display: inline;
        margin-top: 30px;
        margin-bottom: 20px;
        border-radius: 3px;
        border: 0;
      }
    }
  }
}

.contact-content.visible-xs {
  .contact-fn {
    text-align: center;
    font-size: @contact-mobile-fn-size;
    background-color: @contact-mobile-fn-background;
    font-weight: 500;
    color: @contact-mobile-fn-color;
    .break-word;
  }
  .contact-infos {
    display: flex;
    flex-direction: column;
    button {
      width: 100%;
    }

    .contact-items-group {
      .title {
        color: @contact-mobile-title-color;
        font-size: @contact-mobile-title-font-size;
        text-transform: uppercase;
      }

      background-color: @m-white;
      padding: 6px 12px;
      .mdi {
        color: @contact-item-action-color;
        font-size: 18pt;
        width: 30px;
        min-height: 100%;
        float: left;
      }

      .contact-item-data {
        font-size: @contact-mobile-font-size;
        min-height: 60px;
        margin: 0;
        width: 100%;

        p, ul {
          text-align: left;
          text-transform: none;
          margin: 0 0 0 60px;
        }

        p {
          .break-word;
        }

        dl.addressbook-title {
          height: 100%;
          margin-bottom: 0;
          margin-left: 60px;

          dt {
            display: inline-block;
            font-weight: normal;
            background-color: @m-blue;
            color: @m-white;
            padding: @contact-tag-padding;
            border-radius: @contact-tag-border-radius;
          }
        }

        .type {
          color: @m-gray;
          font-size: 10pt;
          text-transform: capitalize;
        }
      }

      .tag-item {
        background-color: @m-blue;
        color: @m-white;
        margin: 2px;
        padding: @contact-tag-padding;
        float: left;
        list-style: none;
        font-size: smaller;
        .break-word;
        max-width: 100%;
        border-radius: @contact-tag-border-radius;
      }
      ul.tag-list {
        padding: 0;
      }
    }
  }
}

.contacts-list {
  a > i.contact-attr-icon {
    color: @primaryColor;
  }

  .listview .lv-attrs > li {

    .hidden-xs;
    margin-right: -1px;
    margin-top: 3px;

    &:not(.info):not(.primary):not(.warning):not(.danger) {
      border: 1px solid darken(@darkenBgColor, 8%);
    }
    &:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
      margin-left: 5px;
      a {
        padding: 2px 5px;
      }
    }
    &:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      a {
        padding: 3px 5px 1px 5px;
      }
    }
  }

  .contact-letter {
    h2 {
      font-weight: 500;
      font-size: x-large;
      color: darken(@m-gray, 30%);
    }
  }

  .contacts-body {
    top: 0;
    position: inherit;

    .empty-message {
      .flex-column;
      .all-centered;

      height: 70vh;
      text-align: center;

      img {
        height: 150px;
        opacity: 0.7;
        margin-bottom: 10px;
      }

      .message {
        color: @secondaryTextColor;
        font-size: 1.5em;
        text-align: center;
      }
    }

    .error-message {
      .flex-column;
      .all-centered;
      .text-danger;

      height: 70vh;
      text-align: center;

      i.mdi {
        font-size: 3em;
        vertical-align: middle;
        margin-right: 5px;
      }

      .message {
        font-size: 1.5em;
        vertical-align: middle;
      }
    }
  }
}

.contact-list-item {
  .touch-zone {
    cursor: pointer;
    min-height: 35px;
  }

  animation: fadeIn 0.3s;
  -webkit-animation: fadeIn 0.3s;
  cursor: pointer;

  .contact-display-name {
    font-weight: 500;
    font-size: larger;
  }

  .contact-list-item-attrs {
    & > li {
      padding: 0;
      max-width: 100%;

      & > a {
        padding: 2px 10px 3px;
        margin: 0;
        display: block;
        width: 100%;
        height: 100%;
        .ellipsis;
      }
    }
    & .contact-list-item-highlight {
      .inline-flex;
      max-width: 100%;
      .contact-item-highlight {
        .inline-flex;
        max-width: 100%;

        & > p, a {
          width: 90%;
          height: 100%;
          margin: 0;
          .ellipsis;
        }
      }
      & .p-t-5 {
        max-width: 100%;
      }
    }
  }

}

contact-display {
  .contact-additional-info {
    .flex-row;

    padding-top: 20px;
    padding-left: 10px;

    i {
      font-size: 20px;
      padding-right: 10px;
    }

    .tag-list .tag-item {
      border-radius: @contact-tag-border-radius;
    }

    a {
      background-color: @m-blue;
      color: @m-white;
      padding: @contact-tag-padding;
      border-radius: @contact-tag-border-radius;
    }
  }
}

contact-list-item {
  cursor: pointer;
}

.contact-letter::after {
  content:'';
  background-color: lighten(@m-gray, 20%);
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: 10px;
  left: 0px;
}

.letter-list .block-header {
  margin-bottom: 15px;
  padding-left: 5px;
  margin-top: 0px;
}

contact-edition-form {
  .form-control {
    margin-top: 10px;
  }
}

contact-photo {
  &[list-view=true] {
    min-height: 35px;
    min-width: 35px;
  }
  position: relative;
  display: inline-block;
  &:hover > .edit-hint{
      background: rgba(0, 0, 0, 0.8);
  }
  img {
    margin-top: 20px;
    &.esn-avatar {
      margin-top: 0px;
    }
    width: 300px;
    height: 300px;
    border-radius: 3px;
  }

  .edit-hint {
    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;
    }
  }
}

@media(min-width: @screen-sm-min) {
  contact-photo {
    width: 100%;
    &[list-view=true] {
      padding: 0;
    }
    padding-right: 20px;
    max-height: 512px;
    max-width: 512px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
    .edit-hint {
      margin-right: 20px;
    }
  }
}

.fadeIn200ms {
  animation: fadeIn 0.2s;
  -webkit-animation: fadeIn 0.2s;
}

.contact-list-card {
  margin-bottom: 20px;
  min-width: @contact-card-display-image-size * 2;

  img {
    min-width: @contact-card-display-image-size;
    width: @contact-card-display-image-size;
    height: @contact-card-display-image-size;
    max-width: @contact-card-display-image-size;
    border-radius: 1px;
  }

  .contact-info {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    div {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.actions {
  z-index: auto;
}

.contact-controls-wrapper > .contact-controls.row > a {
  color: @m-white;
  font-size: 14px;
  i {
    vertical-align: sub;
  }
}

.contact-dropdown.lv-actions {
  &.actions > li > a {
    margin-top: 3px;
  }
  &.actions > li > a > i,
  &.actions > a > i {
    color: @m-gray;
  }
  &.actions > li > a:hover > i,
  &.actions > a:hover > i {
    color: @m-gray;
  }
  &.actions > li > a:before,
  &.actions > a:before {
    background-color: @m-gray;
    opacity: 0.2;
  }
  &.actions > li.open > a > i,
  &.actions.open > a > i {
    color: @m-gray;
  }
  li.open + ul.dropdown-menu {
    display: block;
    cursor: pointer;
  }
  & .mdi {
    margin-top: 2px;
    font-size: 1.9em;
    color: @m-gray;
  }
}

.multi-input-content {
  .form-group {
    margin-bottom: 5px;
  }

  input.multi-input-text {
    padding-right: 25px;
  }
}

@media(min-width: @screen-sm-min) {
  .card-contact {
    margin-top: 25px;
  }

  .contact-list-item .touch-zone {
    min-height: 50px;
  }
}

.contact-alpha-letter {
  position: fixed;
  top: 120px;
  z-index: 100;
  right: 15px;
  font-size: 1.9em;
  text-align: center;
  color: @m-white;
  background-color: @m-gray;
  width: 35px;
  height: 35px;
}

.media-heading {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-heading-search {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: row;

  h4 {
    padding-right: 6px;
  }
}

#sub-header {
  ul.dropdown-menu li a {
    text-align: right;
    font-weight: normal;
  }
}
.contact-dropdown-font {
  a {
    color: @secondaryTextColor !important; /* override drop-down  */
  }
}

.contact-list-item,contact-list-card {
  .highlight {
    background: @m-yellow;

  &.empty {
    display: none;
    }
  }
}