Misago/static/sora/css/sora/navs.less

// Misago Navigations
// -------------------------
.header-tabbed {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;

  .nav-tabs li {
    a:link, a:active, a:visited {
      font-weight: bold;
    }
    
    &.active a:link, &.active a:active,
    &.active a:visited, &.active a:hover {
      background-color: @bodyBackground;
      border-bottom: 4px solid @linkColor;
      border-width: 0px 0px 4px 0px;
      padding-top: (@baseLineHeight / 2) - 1px;
      padding-bottom: (@baseLineHeight / 2) - 5px;
    }
    
    &.fallback {
      float:right;
      
      a:link, a:active,
      a:visited, a:hover {
        border-bottom: none;
        .border-radius(3px);
        margin-top: 4px;
        padding: 4px 12px;
      }
    }
  }
}

// Tabs extra
.tabs-extra {
  float: right;
  margin: 0px;
}

// Tabs on left
.tabs-left {
  background-color: darken(@bodyBackground, 2%);
  .border-radius(3px 0px 0px 3px);
  padding-left: 8px;
  
  ul {
    margin-bottom: 0px;
    width: 100%;
    
    li {
      &.nav-header {
        font-size: 100%;
      }
      
      a, a:link, a:active, a:visited {
        .opacity(80);
        font-weight: bold;
      }
      
      a:hover {
        .opacity(90);
      }
      
      &.active {
        a, a:link, a:active,
        a:visited, a:hover {
          background-color: @bodyBackground;
          .opacity(100);
        
          color: @black;
            
          i {
            background-image: url("@{iconSpritePath}");
          }
        }
      }
    }
    
    li:first-child {
      padding-top: 12px;
    }
  }
}

// Tabs content
.sidetabs-content {
  padding-top: 0px;
  margin-top: -12px;
}

// List nav
.list-nav {
  overflow: auto;
  margin-bottom: 4px;
  
  .nav-pills {
    margin: 0px;
  }
  
  &.last {
    margin-top: -8px;
  }
    
  button, button:hover, button:active {
    border: none;
    margin: 0px;
    position: relative;
    top: 2px;
    padding: 6px 12px;
    padding-bottom: 5px;
  }
}

// Pills
.nav-pills {
  li {
    margin-left: 8px;
    
    form {
      margin: 0px;
      padding: 0px;
    }
    
    button, button:hover, button:active {
      border: none;
    }
      
    &.info, &.danger, &.primary, &.success {
      a:link, a:visited {
        font-weight: bold;
      }
    }
    
    &.info {
      a:link, a:visited, button {
        background-color: @grayLighter;
        
        color: @gray;
            
        i {
          .opacity(60);
        }
      }
      
      a:active, a:hover, button:active, button:hover {
        background-color: @gray !important;
        color: @white;
            
        i {
          background-image: url("@{iconWhiteSpritePath}");
          .opacity(100);
        }
      }
    }
    
    &.danger, &.primary, &.success {
      a:link, a:visited, button {
        color: @white;
              
        i {
          background-image: url("@{iconWhiteSpritePath}");
        }
      }
    }
    
    &.discourage {
      a:link, a:visited, button {
        background-color: @grayLighter;
        .opacity(40);
        
        color: @grayDark;
      }
      
      a:active, a:hover, button:active, button:hover {
        .opacity(80);
      }
    }
    
    &.danger {
      a:link, a:visited, button {
        background-color: lighten(@red, 20%) !important;
      }
      
      a:active, a:hover, button:active, button:hover {
        background-color: @red !important;
      }
    }
    
    &.primary {
      a:link, a:visited, button {
        background-color: desaturate(lighten(@linkColor, 10%), 10%) !important;
      }
      
      a:active, a:hover, button:active, button:hover {
        background-color: @linkColor !important;
      }
    }
    
    &.success {
      a:link, a:visited, button {
        background-color: lighten(@green, 20%) !important;
      }
      
      a:active, a:hover, button:active, button:hover {
        background-color: @green !important;
      }
    }
  }
}

// Pager and nav
.pager {
  margin: 0px 0px;
  margin-top: 6px;
  padding: 0px;
  margin-right: 6px;
  
  &>li {
    margin-right: 6px;
  
    &>a {
      &:link, &:active, &:visited {
        background: darken(@bodyBackground, 8%);
        border: none;
        .border-radius(3px);
        padding: 2px 5px;
        
        color: @grayDark;
        font-weight: bold;
      }
    
      &:hover {
        background-color: @linkColor;
        
        color: @white;
        
        i {
          background-image: url("@{iconWhiteSpritePath}");          
        }
      }
    }
    
    &.unread>a {
      &:link, &:active, &:visited {
        background: darken(@orange, 10%);
        
        color: @white;
        
        i {
          background-image: url("@{iconWhiteSpritePath}");          
        }
      }
    
      &:hover {
        background: lighten(@orange, 10%);
      }
    }
    
    &.moderated>a {
      &:link, &:active, &:visited {
        background: darken(@purple, 10%);
        
        color: @white;
        
        i {
          background-image: url("@{iconWhiteSpritePath}");          
        }
      }
    
      &:hover {
        background: lighten(@purple, 10%);
      }
    }
    
    &.reported>a {
      &:link, &:active, &:visited {
        background: @red;
        
        color: @white;
        
        i {
          background-image: url("@{iconWhiteSpritePath}");          
        }
      }
    
      &:hover {
        background: lighten(@red, 10%);
      }
    }
    
    &.count {
      color: lighten(@textColor, 30%);
      margin-right: 24px;
    }
  }
}