Misago/static/cranefly/css/cranefly/navbar.less

// Navbar
// -------------------------
.navbar-header {
  .navbar-inner {
    background: none;
    background-color: @navbarBackground;
    border-bottom: 1px solid @navbarBorder;
    .box-shadow(none);

    .container {
      background: url(@navbarLogoImage);
      background-position: left center;
      background-repeat: no-repeat;
    }

    .brand {
      margin-left: @navbarLogoWidth - @baseFontSize;

      text-shadow: none;

      &:link, &:active, &:visited, &:hover {
        color: @navbarBrandColor;
        font-size: 200%;

        span {
          color: @navbarMottoColor;
        } 
      }
    }

    .navbar-search-form {
      background-color: @white;
      border: 1px solid @navbarBorder;
      border-radius: @baseBorderRadius;
      margin-top: ((@navbarHeight - @baseLineHeight) / 2) - 6px;
      padding: 1px 0px;

      color: @textColor;

      input {
        border: none;
        .box-shadow(none);
        margin: 0px;
      }

      button {
        margin: 0px;
        .opacity(30);

        &:hover, &:active {
          .opacity(80);
        }
      }
    }

    .navbar-blocks {
      margin-left: 6px;

      li {
        margin-left: 6px;

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

        a:link, a:visited, .btn-link {
          background-color: lighten(@navbarBackground, 2%);
          border: 1px solid darken(@navbarBorder, 2%);
          border-radius: @baseBorderRadius;
          padding: 5px 8px;
          margin-top: ((@navbarHeight - @baseLineHeight) / 2) - 6;

          i {
            .opacity(70);
          }

          .label {
            background-color: @red;
            margin-left: 4px;
            padding-left: 6px;
            padding-right: 5px;
            position: relative;
            bottom: 1px;
          }
        }

        a:hover, a:active, .btn-link:hover, .btn-link:active {
          background-color: @linkColor;
          border-color: darken(@linkColor, 10%);

          &.danger {
            background-color: @red;
            border-color: darken(@red, 10%);
          }

          &.hot {
            background-color: @orange;
            border-color: darken(@orange, 10%);
          }

          &.fresh {
            background-color: @green;
            border-color: darken(@green, 10%);
          }

          i {
            background-image: url("@{iconWhiteSpritePath}");
            .opacity(100);
          }

          .label {
            background-color: @grayLighter;

            color: @textColor;
          }
        }

        &.user-profile {
          a:link, a:visited, a:hover, a:active {
            background: none;
            border: none;
            margin-right: 8px;
            margin-top: 5px;

            font-weight: bold;
            text-shadow: none;

            img {
              border-radius: @baseBorderRadius;
              margin-right: 4px;
              width: 32px;
              height: 32px;
              position: relative;
              bottom: 1px;
            }
          }
        }
      }
    }

    .navbar-user-nav {
      li {
        .btn {
          padding: 2px 8px;
          margin-left: 8px;
          margin-top: (@baseLineHeight / 2) + 3;

          &:link, &:active, &:hover, &:visited {
            color: @white;
          }

          &.btn-danger {
            text-shadow: 0px 1px 0px darken(@red, 15%);

            &:hover, &:active, &:focus {
              background-color: saturate(@red, 20%);
              border-color: darken(saturate(@red, 20%), 5%);
            }
          }

          &.btn-inverse {
            text-shadow: 0px 1px 0px darken(@textColor, 15%);

            &:hover, &:active, &:focus {
              background-color: darken(@textColor, 5%);
              border-color: darken(@textColor, 10%);
            }
          }
        }
      }
    }
  }
}

// Inversed navbar, used for moderation tools
.navbar-modbar {
  .navbar-inner {
    background: none;
    background-color: @grayDarker;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
                color-stop(.25, rgba(0, 0, 0, 0.1)), color-stop(.25, transparent),
                color-stop(.5, transparent), color-stop(.5, rgba(0, 0, 0, 0.1)),
                color-stop(.75, rgba(0, 0, 0, 0.1)), color-stop(.75, transparent),
                to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%,
              transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%,
              transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%,
              transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%,
              transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%,
              transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%,
              transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%,
              transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%,
              transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%,
              transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%,
              transparent 75%, transparent);
    -webkit-background-size: 15px 15px;
    -moz-background-size: 15px 15px;
    background-size: 15px 15px;
    border-bottom: 2px dashed @red;
    min-height: 1px;

    .nav {
      a:link, a:visited {
        padding: @fontSizeMini (@fontSizeMini * 1.4);

        color: darken(@white, 30%);
        text-shadow: 0px 1px 0px @black;
      }

      a:hover, a:active {
        color: @white;
      }

      li.active {
        a:link, a:visited {
          color: @white;
        }
      }
    }

    .navbar-search-form {
      background-color: darken(@grayDark, 15%);
      border-radius: @baseBorderRadius;
      margin-top: ((@navbarHeight - @baseLineHeight) / 2) - 9px;
      padding: 1px 0px;

      input {
        background-color: darken(@grayDark, 15%);
        border: none;
        .box-shadow(none);
        margin: 0px;

        color: @grayLighter;
        text-shadow: 0px 1px 0px @black;
      }

      button {
        margin: 0px;
        .opacity(60);

        i {
          background-image: url("@{iconWhiteSpritePath}");
          .opacity(100);
        }

        &:hover, &:active {
          .opacity(100);
        }
      }
    }
  }
}