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

// Navbar
// -------------------------

.navbar {
  .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 {
              background-color: @white;
              border-radius: @baseBorderRadius;
              .box-shadow(0px 0px 4px @grayLighter);
              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%);
            }
          }
        }
      }
    }
  }
}