sbot/ui/less/com/message.less

.message {
  position: relative;
  margin: 0 auto;
  word-break: break-word;  

  & > .user-img {
    position: absolute;
    left: 0px;
    top: 0px;

    img {
      width: 88px;
      height: 88px;
      opacity: 0.9;
    }
    img:hover {
      opacity: 1;
    }
  }

  &.secret {
  }

  &.smallview {
    cursor: pointer;
  }

  .message-inner {
    margin-left: 88px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  &.unread .message-inner {
    background: #FCFFE3;
  }

  &.add-anim {
    .message-inner {
      transition: background 0.5s;
      background: #EDFFAC;
    }
  }

  .message-ctrls {
    margin: 0;
    background: #eee;
    font-size: 12px;

    a {
      color: #666;
    }
    li {
      padding: 7px 10px;
    }
  }
  .message-header,
  .message-footer {
    margin: 0;
    height: 34px;
    padding-left: 3px;

    a {
      color: #666;
    }
    li {
      padding: 7px 10px;
    }
    .glyphicon {
      font-size: 18px;
      color: #bbb;
      &.glyphicon-lock {
        font-size: 12px;
      }
    }
    a:hover .glyphicon {
      color: #aaa;
    }
    .favorite {
      padding-right: 0;
      a.selected .glyphicon-star {
        color: rgb(255, 194, 0);
      }
      a.selected:hover .glyphicon-star {
        color: darken(rgb(255, 194, 0), 10%);
      }

      .users {
        margin-right: 5px;
        .user-img {
          margin-right: 5px;
        }
        img {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          vertical-align: top;
        }
        span {
          color: #555;
          position: relative;
          top: -5px;
          font-size: 14px;
          margin: 5px;
        }
      }
    }
  }
  .message-footer a {
    color: gray;
  }
  .message-body {
    padding: 6px 24px;

    & > * {
      margin: 0;
    }
  }
  .markdown {
    & > :first-child {
      margin-top: 0;
    }
    & > :last-child {
      margin-bottom: 0;
    }
    ul {
      padding-left: 24px;
    }
    img {
      max-width: 424px;
    }
  }
  .message-mentions {
    background: #fafafa;
    padding: 8px 24px;
    box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1);
    a {
      color: gray;
    }
  }

  .message-comments {
    &:empty {
      display: none;
    }
  }
  .composer-header {
    margin-left: 88px;
    max-width: 100%;
  }
  .pretty-raw {
    font-size: 15px;
    td {  
      padding: 2px 7px;
      vertical-align: top;
    }
    td:first-child {
      text-align: right;
      min-width: 150px;
      color: #999;
    }
  }
}