style.less

/*
 * Global
 */


@linkBlue: #0275d8;


// Circuit Basic Colors
@black:             #000000;
@blue:              #0094ff;
@charcoal:          #2a3136;
@charcoal25:        #b3b2b4;
@charcoal50:        #7c7b7f;
@charcoal75:        #525459;
@charcoalBlack30:   #1d2226;
@charcoalBlack50:   #15181b;
@green:             #88c541;
@grey:              #dadada;
@orange:            #fe8900;
@red:               #c22026;
@white:             #ffffff;
@yellow:            #ffef38;

// Circuit Variations of colors
@darkBlue:          #374457;
@darkGreen:         #497034;
@lightBlue:         #e3e7ed;
@lightCharcoal:     #374046;
@lightGrey:         #f0f0f0;
@lightRed:          #f92a32;
@lightTintGrey:     #f9f9f9;
@linkLightGreen:    #afee5c;
@linkDarkGreen:     #2f7d00;
@mediumGrey:        #9a9a9f;
@tintGreen:         #70b324;
@tintOrange:        #fc9f31;

.h3, h3 {
  font-size: 20px;
  font-weight: 500;
}

.h4, h4 {
  font-size: 16px;
  font-weight: 400;
}

.h5, h5 {
  font-size: 13px;
  font-weight: 300;
}

.small {
  font-size: 13px;
}

.fw4 {
  font-weight: 500;
}


.fw6 {
  font-weight: 600;
}

.light {
  color: #777777;
}

.bg-inverse {
  background-color: #2a3136!important;
}

a:focus {
  outline: none;
  text-decoration: none;
}

a {
  text-decoration: none !important;
}

*.unselectable {
  user-select: none;
}



body {
  font-size: 13px;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
}

button {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  outline: none;
}

button:hover, button:focus, button:active {
  text-decoration: none !important;
  outline: none;
}

button:hover {
  cursor: pointer;
}

.btn-link, .btn-link:focus {
  color: @charcoal75;
  font-weight: 500;
}

.btn-link:hover {
  color: @linkBlue;
}

.dropdown-menu>button {
  font-size: 13px;
}

.hide {
    display: none!important;
}
.show {
    display: block!important;
}

.btn.focus, .btn:focus {
  box-shadow: none;
}

/* Icon size, color and hover state */
.fa {
  font-size: 20px;
}
.btn.btn-sm .fa {
  font-size: 14px;
  padding-right: 6px;  
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.avatar-small {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.avatar-large {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/*
 * No system
 */
.no-system {
  display: flex;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
  .center {
    max-width: 50%;
    div, p {
      text-align: center;
    }
  }
  nav  a {
    margin: 0 10px;
  }
  .spinner {
    height: 22px;
  }
  .message {
    height: 30px;
  }
}


/*
 * Header
 */
 #header {
  .fa:hover, .navbar-text:hover {
    color: rgba(255,255,255,.95) !important;
    cursor: pointer;
    text-decoration: none;
  }
  .fa, .navbar-text {
    color: rgba(255,255,255,.75) !important;
    cursor: pointer;
    padding: 8px;
  }
  .navbar-text {
    font-size: 16px;
  }
}


/*
 * Selector
 */

#selector {
  position: fixed;
  width: 300px;
  top: 80px;
  bottom: 0;
  left: 0px;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: #f5f5f5;

  .loading {
    padding: 10px;
  }
  .conv-filter {
    position: fixed;
    top: 43px;
    width: 300px;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: white;
    .btn-link {
      border: 0;
    }
    .dropdown {
      button[data-toggle="dropdown"] {
        border: 0;
        background: white;
        outline: none;
      }
    }
    .fa {
      font-size: 16px;
    }
  }

  .chat {
    list-style: none;
    margin: 0;
    padding: 0;

    .fa {
      font-size: 12px;
      padding-right: 5px;
    }

    li {
      border-bottom: 1px dotted #B3A9A9;
      border-right: 1px solid #eee;
      height: 71px;
      padding: 10px 10px 2px 10px;
      &:hover {
        cursor: pointer;
        background-color: white;
      }
      &.selected {
        background-color: white;
        border-right: 1px solid white;
      }
      &:active {
        background-color: #f5f5f5;
      }

      &.left .chat-body {
        margin-left: 60px;
      }

      &.right .chat-body {
          margin-right: 60px;
      }

      .chat-body p {
          margin: 0;
          color: #777777;
      }

      .info {
        padding-top: 3px;
        .timestamp {
          padding-right: 3px;
        }
      }

      .img-circle {
        width: 50px;
        vertical-align: text-top;
      }

      .chat-img {
        position: relative;
        margin-right: 10px;
      }

      .teaser {
        height: 18px;
      }

      &.unread {
        border-right: 3px solid #0c0;
        padding-right: 7px;
      }
/*
      .unread {
        position: relative;
        z-index: -1;
      }
      .unread::before,
      .unread::after {
        content: '';
        position: absolute;
        top: -6px;
        right: -10px;
        border-color: transparent;
        border-style: solid;
      }
      .unread::after {
        border-width: 10px;
        border-right-color: #0c0;
        border-top-color: #0c0;
      }
*/
    }
    
  }
}



/*
 * Main content
 */

.main {
  width: ~"calc(100% - 300px)";
  position: fixed;
  top: 43px;
  bottom: 0;
  left: 300px;
  z-index: 1000;
  display: block;
  background-color: white;
  border-right: 1px solid #eee;

  .header {
    padding: 13px;
    height: 81px;
    border-bottom: 1px solid #b3b2b4;
    .media-body {
      .tabs {
        margin-left: -9px;
        .middot {
          padding-top: 5px;
        }

      }
    }
  }

  .content {
    width: inherit;
    position: fixed;
    top: 124px;
    bottom: 0;
    z-index: 1000;
    display: block;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: white;
    border-right: 1px solid #eee;
    padding: 0 15px 15px 15px;
    word-wrap: break-word;
    word-break: break-word;
    height: auto;
    overflow-y: auto;

    li.media {
    }

  }
}

.thread-component {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 15px 20px 15px 15px;
  background: #f0f0f0;
  margin: 15px 10px 10px 10px;
  border-radius: 5px;

  >div {
    margin-left: 5px;
    flex: 1 1 0%;

    .name {
      font-weight: 600;
      height: 19px;
    }

    .unread {
      color: #0c0 !important;
    }

    .post {
      min-height: 35px;
    }
    
    .comments {
      margin-top: 20px;
      display: flex;
      align-items: flex-start;
    }

    hr {
      margin-top: 8px;
      margin-bottom: 0;
      border-top: 0;
    }
    
    .reply {
      font-size: 13px;
      padding: 0;
      margin-top: 15px
    }
    
    a {
      text-decoration: none;
      color: @green;
      &:hover {
        color: @darkGreen;
      }
    }
    p {
      margin-bottom: 5px;
    }
  }
  .text-item-component {
    width: 100%;
  }
  .item-actions-component {
    height: 19px;
    margin-top: 2px;
    .fa {
      font-size: 12px;
      padding-top: 3px;
      padding-right: 6px;
      cursor: pointer;
      &:hover {
        color: black;
      }
    }
    .likes {
      cursor: pointer;
      &:hover {
        color: black;
      }        
    }
  }
}



.fixed {
  position: fixed;
}


/* threads shortcut */
.thread-shortcuts {
  padding-left: 0;
  margin-left: -5px;
  .title {
    top: 140px;
  }
  .bs-docs-sidebar {
    margin-top: 20px;
    margin-bottom: 20px;
    >ul {
      top: 165px;
    }
    .nav>li>a {
      color: @charcoal75;
      border-left: 2px solid transparent;
      padding: 4px 15px;
      font-size: 13px;
      font-weight: 400;
    }
    .nav > li > a {
      font-weight: 300;
    }
    .nav>.active>a, .nav>.active:hover>a, .nav>.active:focus>a {
      font-weight: 700;
    }
    .nav>.active>a, .nav>li>a:hover, .nav>li>a:focus {
      color: @linkBlue;   
      text-decoration: none;          
      background-color: transparent;  
      border-left-color: @linkBlue; 
    }
  }
}




/* transitionas */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

/* popovers */
.popover {
  background-color: #f9f9f9;
}
.popover-content {
  overflow: scroll;

}
/* Remove arrow of popover
.popover::after, .popover::before {
  border-style: none;
}*/

.entry {
  margin-top: 10px;
  font-size: 14px;
  color: #525459;
  .fa {
    font-size: 14px;
    padding-right: 6px;
  }
  .label {
    color: #777777;
    padding-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 20px;
  }
}

#participants-popover {
  .media-body {
    max-width: ~"calc(100% - 40px)";
    .subtitle {
      padding-top: 1px;
    }
  }
  .popover-content {
    padding-bottom: 2px;
  }
}

#schedule-popover, #details-popover {
  .label {
    .light;
    padding-right: 5px;
  }
  .entry {
    margin-bottom: 5px;
  }
  .chk-label {
    padding-left: 3px;
    vertical-align: middle;
  }
}
/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 320px;
  height: 100%;
  transform: translate3d(0%, 0, 0);
}
.modal.right.search .modal-dialog {
  width: 560px;
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
  left: -320px;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog{
  left: 0;
}
      
/*Right*/
.modal.right.fade .modal-dialog {
  right: -320px;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.search .modal-dialog {
  width: -560px;
}

.modal.right.fade.show .modal-dialog {
  right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
  border-radius: 0;
  border: none;
}

.modal-header {
  border-bottom-color: #EEEEEE;
  background-color: #FAFAFA;
  min-height: 41px;
}

/* Main Editor */
.main-editor-component, .reply-editor-component {
  >div {
    padding: 0 10px 0 20px;  
  }
  .subject-editor {
    .editor {
      font-weight: 600;
      border-bottom: none;
      background-color: white;
    }
  }
  .content-editor {
    height: auto;
    position: relative;

    .editor {
      min-height: 80px;
      background-color: white;
    }
    .send {
      position: absolute;
      bottom: 7px; 
      .main-editor-component& {
        right: 10px;
      }
       .reply-editor-component& {
        right: 0px;
      }
    }
    .ql-snow.ql-toolbar {
      border: none;
      button.send {
        float: right;
        width: auto;
        font-size: 13px;
        border-color: #0275d8;
        border: 1px solid #0275d8;
        border-radius: .25rem;
      }
      button.send:hover {
        color: #fff;
        background-color: #0275d8;
        border-color: #0275d8;
      }
    }
    .ql-editor {
      overflow-y: visible;
      padding: 8px 10px;
    }
    .reply-editor-component& {
      padding: 20px 0px 0px 0px;
    }
  }
}

.ql-editor.ql-blank::before {
  opacity: 0.4;
}


/******************************/
/* Avatar                     */
/******************************/
.avatar-component {
  position: relative;
  margin-right: 10px;
  float: left;

  >img {
    border-radius: 50%;
    position: absolute;
  }

  &.tiny {
    width: 25px;
    height: 20px;
    >img {
      width: 25px;
      height: 25px;
    }
    >div {
      padding: 5px 5px;
      top: 17px;
      left: 17px;
    }
  }

  &.small {
    width: 35px;
    height: 35px;
    >img {
      width: 35px;
      height: 35px;
    }
    >div {
      padding: 5px 5px;
      top: 26px;
      left: 26px;
    }
  }

  &.large {
    width: 50px;
    height: 50px;
    >img {
      width: 25px;
      height: 25px;
    }
    >div {
      padding: 7px 7px;
      top: 38px;
      left: 38px;
      display: none;
    }

    .bottom {
      top: 25px;
    }
    .right {
      left: 25px;
    }

    &.collage-1 {
      >img {
        width: 50px;
        height: 50px;
      }
      >div {
        display: block;
      }
    }
  }

  >div {
    border-radius: 100%;
    position: absolute;
    &.AVAILABLE {
      background: #88c541;
    }
    &.AWAY {
      background: #ffef38;
    }
    &.BUSY {
      background: #c22026;
    }
    &.DND {
      background: #c22026;
    }
  }
}


.prettyprint {
  background-color: #f0f0f0;
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
  border-radius: 3px;
}