Misago/static/sora/css/sora/threads.less

// Misago Threads Styles
// --------------------------------------------------
.subforums-list {
  margin: 0px;
  position: relative;
  bottom: 32px;
  
  .category {
    margin-bottom: -24px;
  }
}

// Threads list
// --------------------------------------------------
.threads-list {
  .thread-icon {
    background-color: @grayLighter; 
    .border-radius(3px);
    padding: 5px 6px;
  }
  
  .jump { 
    .border-radius(3px);
    padding: 3px 4px;
    margin: -3px 0px;
    .opacity(30);
        
    &:hover {
      .opacity(100);
      
      &.jump-new {
        background-color: @orange;
      }
      
      &.jump-last {
        background-color: @blue;
      }
      
      i {
        background-image: url("@{iconWhiteSpritePath}");
      }
    }
  }
  
  .thread-stat {
    text-align: right;
  }
  
  .thread-author, .thread-poster {
    font-weight: bold;
        
    a {
      color: @textColor;
    }
    
    .avatar-tiny {
      margin-right: 4px;
    }
  }
  
  .thread-closed {
    background-color: @red; 
  }
  
  .thread-new {
    background-color: @linkColor; 
  }
  
  .thread-flags {
    float: right;
    margin: 0px;
    padding: 0px;
    
    li {
      float: right;
      margin: 0px;
      margin-left: 6px;
      padding: 0px;
    }
  }
}

// Thread view
// --------------------------------------------------
.thread-info {
  overflow: auto;
  
  li {
    float: left;
    margin-right: 16px;
    .opacity(50);
    
    font-weight: bold;
    
    a {
      color: @textColor;
    }
  }
}

.posts-list {
  margin-top: 12px;
  margin-bottom: 20px;
  
  .well-post {
    margin: 0px;
    margin-bottom: 16px;
    overflow: auto;
    padding: 16px 0px;

    .post-author{
      overflow: auto;
      float: left;
      width: 286px;
      position: relative;
      bottom: 4px;
      
      .avatar-normal {
        float: left;
        margin: 4px 0px;
        margin-left: 16px;
        width: 80px;
        height: 80px;
        .box-shadow(0px 0px 4px @grayLight);
      }
        
      .post-bit {
        float: left;
        margin-left: 12px;
        padding-top: 4px;
        
        font-weight: bold;
        font-size: 120%;
        
        p {
          margin: 0px;
        }
        
        .lead {
          font-size: 150%;
        }
        
        span.lead {
          color: lighten(@grayLight, 20%);
        }
        
        .user-title {
          color: @grayLight;
        }
        
        .post-date {
          margin-top: 4px;
          
          color: @grayLight;
          font-size: 70%;
          font-weight: normal
        }
      }
    }

    .post-content {
      margin-left: 286px;
      margin-right: 200px;
      padding: 0px 16px;
            
      .post-foot {
        margin-top: 20px;
        
        .lead {
          margin: 0px;
          
          color: @grayLight;
          font-size: 100%;
          
          a {
            color: @grayLight;
          }
        }
        
        .signature {
          border-top: 1px solid @grayLighter;
          padding-top: 12px;
          
          .markdown {
            .opacity(70);
          }
        }        
      }
    }
    
    .post-extra {
      overflow: auto;
      float: right;
      width: 200px;
      padding-right: 16px;
      
      .post-perma {
        margin-left: 8px;
        
        color: @grayLight;
      }
      
      .label {
        margin-left: 8px;
        margin-bottom: 8px;
        padding: 4px 5px;
        font-size: 100%;
      }
      
      .label-purple {
        background-color: @purple;
      }
    }
    
    .post-nav {
      clear: both;
      margin-left: 286px;
      overflow: auto;
      padding: 8px 16px;
      padding-bottom: 0px;
      margin-bottom: -8px;
      
      .changelog {
        float: left;
        .opacity(50);
        
        color: @grayLight;
      }
      
      ul {
        margin: 0px;
        padding: 0px;
      }
      
      .nav-pills li {
        .opacity(10);
        
        a {
          padding: 6px 7px;
        }
        
        button {
          padding: 3px 7px;
        }
        
        a, button {
          background-color: darken(@bodyBackground, 20%);
          border: none;
          .border-radius(3px);
          margin: 0px;
          
          color: @white;
          font-weight: bold;
          
          &:hover {
            background-color: lighten(@linkColor, 15%);
            
            &.danger {
              background-color: lighten(@red, 15%);
            }
          }
        }
      
        i {
          background-image: url("@{iconWhiteSpritePath}");
        }
      }
    }
    
    &:hover {
      .changelog, .nav-pills li {
        .opacity(100);
      }
    }
  }
  
  .post-checkpoints {
    padding-top: 4px;
    
    &:last-child {
      margin-bottom: -24px;
    }
    
    .checkpoint {
      margin: 0px;
      
      color: @grayLight;
      text-align: center;
      
      span {
        background-color: @bodyBackground;
        display: inline-block;
        padding: 4px 12px;
        position: relative;
        bottom: 16px;
      }
    }
    
    a {
      color: @textColor;
      font-weight: bold;
    }
    
    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;
      margin: 0px;
      margin-top: 8px;
      height: 4px;
    }
  }
}

// Thread mod actions
.mod-actions {
  overflow: auto;
  border: none;
  .border-radius(3px);
  margin-top: 0px;
}

// Quick reply box
.quick-reply {
  margin-top: 12px;
  overflow: auto;
  
  .avatar-big, .arrow {
    float: left;
  }
  
  .arrow {
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      border-right: 12px solid darken(@bodyBackground, 10%);
      position: relative;
      top: 12px;
      left: 5px;
  }
  
  .editor {
    margin-left: 142px;
  }
}