Misago/misago/emberapp/app/styles/_misago/posts.less

//
// Thread Posts
// --------------------------------------------------


// Posts list
//
//==
.posts-list {
  .post-fragment {
    float: left;
    position: relative;
    bottom: @line-height-computed * 1.9;
  }

  .post {
    .user-avatar {
      img {
        border-radius: @border-radius-base;
      }
    }

    .media-body {
      padding-left: @line-height-computed / 2;

      .panel-default {
        position: relative;

        &:after, &:before {
          right: 100%;
          border: solid transparent;
          content: "";
          height: 0; width: 0;
          position: absolute;
          pointer-events: none;
        }

        &:after {
          border-color: transparent;
          border-right-color: @post-panel-bg;
          border-width: @font-size-small - 2;
          top: @line-height-computed / 2;
          margin-top: (@font-size-small * -1) + @font-size-small;
        }

        &:before {
           border-color: transparent;
           border-right-color: @post-panel-border;
           border-width: @font-size-small;
           top: @line-height-computed / 2 - 1;
           margin-top: (@font-size-small * -1) + @font-size-small - 1px;
        }
      }
    }

    &.focus {
      .media-body {
        .panel-default {
          background: @post-active-panel-bg;
          border-color: @post-active-panel-border;

          &:after {
            border-right-color: @post-active-panel-bg;
          }

          &:before {
            border-right-color: @post-active-panel-border;
          }
        }
      }
    }
  }
}


// Post panel
//
//==
.posts-list {
  .panel {
    background: @post-panel-bg;
    border-color: @post-panel-border;
  }
}


// Post header
//
//==
.posts-list {
  .panel {
    .panel-heading {
      background: none;
      border-bottom: none;
      margin-bottom: @line-height-computed * -0.5;

      color: @text-muted;

      .user-name {
        color: @state-default;
        font-weight: bold;
      }

      a.user-name {
        &:link, &:visited {
          color: @state-hover;
        }

        &:hover {
          color: @state-hover;
          text-decoration: text-underline;
        }

        &:active, &:focus {
          color: @state-clicked;
          text-decoration: text-underline;
        }
      }

      .separator {
        margin-left: @font-size-base / 3;
        margin-right: @font-size-base / 3;
      }

      .post-date {
        &:link, &:visited {
          color: @state-default;
        }

        &:hover, &:focus {
          color: @state-hover;
          text-decoration: underline;
        }

        &:active {
          color: @state-clicked;
          text-decoration: underline;
        }
      }

      .label {
        position: relative;
        bottom: 2px;
      }

      .post-check {
        float: right;
        margin: 0px;
        margin-left: @line-height-computed / 2;

        color: @text-muted;
        font-size: 20px;
        text-decoration: none;
        line-height: 19px;

        cursor: pointer;


        &.active {
          color: @brand-success;
        }

        input {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }
      }
    }
  }
}


// Post alert
//
//==
.posts-list {
  .panel {
    .alert {
      border: none;
      border-radius: 0px;
      margin-top: @line-height-computed / 2;
      margin-bottom: 0;

      font-size: @font-size-base + 2px;
      text-align: center;

      &.alert-default {
        background-color: @alert-default-bg;

        color: @alert-default-text;
      }

      .user-avatar {
        &, &:link, &:active, &:hover {
          text-decoration: none;
        }

        img {
          height: 20px;
          position: relative;
          bottom: 2px;
        }
      }
    }
  }
}


// Post body
//
//==
.posts-list {
  .panel {
    .panel-body {
      .corrupted-message {
        margin: 0px;
      }

      .hidden-message {
        margin: (@line-height-computed * .25) 0px;

        img {
          height: 32px;
          position: relative;
          bottom: 2px;
        }

        a, strong {
          font-weight: normal;
        }
      }
    }
  }
}


// Post footer
//
//==
.posts-list {
  .panel {
    .panel-footer {
      background: none;
      border-top: none;
      margin-top: @line-height-computed * -1.25;
    }
  }
}