Misago/static/cranefly/css/cranefly/thread.less

// Thread view
// -------------------------

.thread-buttons {
  overflow: auto;

  .pull-right {
    margin-left: @baseFontSize;
  }

  .thread-signin-message {
    float: right;

    a:link, a:visited {
      color: @textColor;
    }
  }
}

// Thread body styles
.thread-body {
  .post-wrapper {
    // Post body
    .post-body {
      margin-bottom: @baseLineHeight;
      overflow: auto;

      .user-avatar {
        border-radius: @borderRadiusLarge;
        float: left;
        width: 100px;
        height: 100px;
      }

      .post-content {
        background-color: @postBackground;
        border: 1px solid @postBorder;
        border-radius: @borderRadiusLarge;
        margin-left: 100px + (@baseFontSize * 1.5);
        min-height: 100px;
        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: @postBackground;
          border-width: @fontSizeMini;
          top: @baseFontSize;
          margin-top: (@baseFontSize * -1) + @baseFontSize;
        }

        &:before {
           border-color: transparent;
           border-right-color: @postBorder;
           border-width: @fontSizeMini + 1;
           top: @baseFontSize;
           margin-top: (@baseFontSize * -1) + @baseFontSize - 1px;
        }

        .post-header {
          padding: (@baseFontSize / 2) @baseFontSize;
          padding-bottom: 0px;

          color: grayLighter;

          .post-author {
            color: @textColor;
            font-weight: bold;
          }

          .post-author-label {
            text-shadow: none;

            &.post-label-guest {
              background-color: @grayLighter;

              color: @grayLight;
            }
          }

          .separator {
            color: @grayLighter;
            font-size: @fontSizeLarge;
            line-height: 5px;
          }

          .post-date {
            color: @grayLight;
          }

          .post-changelog {
            color: @grayLight;

            &:hover, &:active {
              color: @textColor;
            }
          }

          .post-perma {
            display: block;
            float: right;
            padding-left: 6px;

            color: @grayLight;
            font-weight: bold;

            &:hover, &:active {
              color: @textColor;
            }
          }

          .post-checkbox {
            float: right;
            position: relative;
            left: @baseFontSize - 4px;
          }

          .post-extra {
            float: right;

            .label {
              margin-left: @baseFontSize / 4;

              text-shadow: none;

              &.label-purple {
                background-color: #7e2ecf;
              }
            }
          }
        }

        .post-message {
          .markdown {
            padding: @baseFontSize;
          }

          .post-signature {
            border-top: 1px dotted darken(@postBackground, 25%);
            .opacity(60);
            margin: 0px @baseFontSize;

            font-size: 80%;

            .markdown {
              padding: 0px;
              padding-top: @baseLineHeight / 4;
              padding-bottom: @baseFontSize;
            }
          }
        }

        .post-footer {
          border-top: 1px solid @postBorder;
          overflow: auto;

          &:empty {
            display: none;
          }

          .post-rating {
            float: left;
            overflow: auto;
            padding: (@baseFontSize / 2) @baseFontSize;
            border-right: 1px dotted @postBorder;

            a {
              color: @grayLight;

              &:hover, a:active {
                color: @textColor;
              }
            }

            span {
              float: left;

              &.post-score {
                color: @grayLight;
                font-weight: bold;

                &.post-score-good {
                  color: @green;
                }

                &.post-score-bad {
                  color: @red;
                }
              }

              &.post-neutral, &.post-like, &.post-hate {
                margin-left: (@baseFontSize / 4); 
              }

              &.post-neutral {
                color: @grayLight;
              }

              &.post-like {
                color: @green;
              }

              &.post-hate {
                color: @red;
              }
            }

            form {
              float: left;
              margin: 0px;
              padding: 0px;

              .btn-link {
                float: right;
                margin: 0px;
                margin-left: (@baseFontSize / 4);
                .opacity(100);
                padding: 0px;

                color: @grayLight;
                font-weight: normal;

                &:hover, &:active, &:focus {
                  text-decoration: underline;
                }

                &.post-like {
                  &:hover, &:active, &:focus, &:disabled {
                    color: @green;
                  }
                }

                &.post-hate {
                  &:hover, &:active, &:focus, &:disabled {
                    color: @red;
                  }
                }

                &:disabled {
                  &:hover, &:active, &:focus {
                    text-decoration: none;
                  }
                }
              }
            }
          }

          .post-actions {
            border-left: 1px dotted @postBorder;
            float: right;
            padding: (@baseFontSize / 2) @baseFontSize;

            color: @grayLight;

            a, span, form {
              float: left;
              overflow: auto;
            }

            form {
              margin: 0px;
              padding: 0px;

              .btn {
                float: right;
                margin: 0px;
                margin-left: @baseFontSize;
                .opacity(100);
                padding: 0px;

                color: @grayLight;
                font-weight: normal;

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

                &.btn-report {
                  &:disabled {
                    color: @green;
                  }
                }

                &.btn-hide {
                  &:hover, &:active, &:focus {
                    color: @orange;
                  }
                }
              }

              &:first-child .btn {
                margin-left: 0px;
              }
            }

            a {
              margin-left: @baseFontSize;

              color: @grayLight;

              &:hover, a:active {
                color: @textColor;
              }

              &:first-child {
                margin-left: 0px;
              }

              &.post-reply {
                color: @gray;

                &:hover, a:active {
                  color: @blue;
                }
              }
            }
          }
        }
      }

      &.post-muted {        
        .user-avatar {
          width: 50px;
          height: 50px;
          .opacity(75);
        }

        .post-content {
          margin-left: 50px + (@baseFontSize * 1.5);
          min-height: 0px;
          .opacity(75);
          padding: @baseFontSize;

          .post-header {
            float: right;
            margin: 0px;
            margin-top: ((@baseFontSize / 2) * -1);
            margin-right: @baseFontSize * -1;

            .post-header-compact {
              float: left;
              margin-right: @baseFontSize;
            }
          }

          .post-message {
            color: @grayLight;
            font-size: @fontSizeLarge;

            strong, a {
              color: @textColor;
              font-weight: normal;
            }
          }
        }
      }
    }
  }

  .post-checkpoints {
    .post-checkpoint {
      text-align: center;

      margin-bottom: @baseLineHeight;

      &.checkpoint-deleted {
        .opacity(30);

        &:hover {
          .opacity(60);
        }
      }

      hr {
        background-color: @grayLight;
        background-image: -webkit-gradient(linear, 0 0, 100% 100%,
                    color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                    color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                    to(transparent));
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
        background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
        background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
        background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
        -webkit-background-size: 10px 10px;
        -moz-background-size: 10px 10px;
        background-size: 10px 10px;
        border: none;
        height: 4px;
        margin-bottom: (@baseLineHeight * -1) + (@baseFontSize / 2) + 1px;
      }

      span {
        background-color: @bodyBackground;
        padding: 0px @baseFontSize;

        color: @grayLight;

        a {
          color: @textColor;
        }

        i {
          .opacity(43);
        }

        form {
          display: inline-block;
          margin: 0px;
          margin-top: -3px;
          margin-left: @baseFontSize / 2;
          padding: 0px;

          .btn {
            margin-top: -2px;
            padding: 0px;

            font-weight: normal;

            &:active, &:hover {
              text-decoration: underline;

              &.btn-show, &.btn-hide {
                color: @orange;
              }

              &.btn-delete {
                color: @red;
              }
            }
          }
        }

        form:first-of-type {
          margin-left: @baseFontSize;
        }
      }
    }
  }
}

// Thread moderation
.thread-moderation {
  background-color: @categoryBackground;
  border: 1px solid @categoryBorder;
  border-radius: @baseBorderRadius;
  .box-shadow(0px 0px 0px 3px @categoryShadow);
  margin-bottom: @baseLineHeight;
  overflow: auto;
  padding: (@baseFontSize / 2);

  form {
    margin: 0px;
  }
}

// Quick reply styles
.thread-quick-reply {
  overflow: auto;
  margin-top: @baseLineHeight;

  .user-avatar {
    border-radius: @baseBorderRadius;
    float: left;
    width: 100px;
    height: 100px;
    overflow: visible;
  }

  .editor {
    margin-left: 100px + (@baseFontSize * 1.5);
    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: @editorBackground;
      border-width: @fontSizeMini;
      top: @baseFontSize;
      margin-top: (@baseFontSize * -1) + @baseFontSize;
    }

    &:before {
       border-color: transparent;
       border-right-color: darken(@editorBackground, 10%);
       border-width: @fontSizeMini + 1;
       top: @baseFontSize;
       margin-top: (@baseFontSize * -1) + @baseFontSize - 1px;
    }
  }
}

// Thread participants list
.thread-participants {
  h3 {
    margin: 0px;
    margin-top: (@baseLineHeight - @baseFontSize) * -1;
    padding: 0px;

    color: @gray;
    font-size: @fontSizeLarge;
    font-weight: bold;
  }

  ul {
    background-color: @white;
    border: 1px solid darken(@bodyBackground, 10%);
    border-radius: @baseBorderRadius;
    margin: 0px;
    margin-bottom: @baseLineHeight;
    padding: 0px;

    li {
      border-bottom: 1px dotted darken(@bodyBackground, 10%);
      margin: 0px;
      padding: 6px 8px;

      font-weight: bold;

      img {
        border-radius: @borderRadiusSmall;
        width: 24px;
        height: 24px;
      }

      a:link, a:active, a:visited, a:hover {
        margin: 0px 4px;

        color: @textColor;
        font-weight: bold;
      }

      &:last-child {
        border-bottom: none;
      }

      form {
        float: right;
        margin: 0px;
        padding: 0px;

        button {
          padding-left: 5px;
          padding-right: 5px;

          i {
            position: relative;
            top: 1px;
          }
        }
      }
    }
  }

  h4 {
    margin: 0px;
    padding: 0px;

    color: @gray;
    font-size: @baseFontSize * 1.2;
    font-weight: bold;
  }

  .no-participants {
    margin-bottom: @baseLineHeight;
  }

  .invite-participant {
    background-color: @white;
    border: 1px solid darken(@bodyBackground, 15%);
    border-radius: @baseBorderRadius;
    margin-top: @baseLineHeight - @baseFontSize;
    padding: 1px;

    form {
      margin: 0px;
      padding: 0px;

      input, button {
        border: none;
        background: none;
        box-shadow: none;
      }

      input {
        width: 70%;
      }

      button {
        float: right;
      }
    }
  }
}