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 {
      height: 30px;
      width: @navbarSearchWidth + @baseFontSize;
      margin-top: ((@navbarHeight - @baseLineHeight) / 2) - 6px;
      overflow: visible;
      position: relative;

      .navbar-search-border {
        background-color: @white;
        border: 1px solid darken(@navbarBorder, 10%);
        .border-radius(@baseBorderRadius);
        position: absolute;
        z-index: @zindexFixedNavbar;

        .navbar-search-text {
          border: 1px solid darken(@navbarBorder, 10%);
          border-radius: @baseBorderRadius;
          margin: -1px;
          padding: 1px 0px;

          color: @textColor;

          &>input {
            border: none;
            .box-shadow(none);
            background: none;
            margin: 0px;
            width: @navbarSearchWidth;
          }

          .icon-search {
            float: right;
            .opacity(50);
            margin-bottom: (@baseLineHeight * -1);
            margin-right: 8px;
            position: relative;
            bottom: (@baseLineHeight * -1) + @baseFontSize;
          }
        }

        &:hover, &.open {
          .box-shadow(0px 0px 3px fadeout(@gray, 30%));

          .navbar-search-text {
            border-color: lighten(@blue, 20%);
            margin-bottom: 0px;
          }

          .extra {
            display: block;
          }
        }

        &>.extra {
          background: @white;
          border-radius: @baseBorderRadius;
          display: none;

          .extra-form {
            padding: 0px @navbarSearchPadding;

            .control {
              margin: (@navbarSearchPadding * 1.5) 0px;

              label {
                color: @gray;
                font-weight: bold;
              }

              select {
                margin: 0px;
                width: 100%;
              }

              input[type="text"] {
                margin: 0px;
                width: (@navbarSearchWidth - (@navbarSearchPadding * 2) - 2px);
              }

              .checkbox {
                margin-bottom: -3px;
              }
            }
          }

          .form-actions {
            border-radius: 0px 0px (@baseBorderRadius - 1);
            margin: 0px;
            margin-top: (@baseFontSize / 2);
            margin-bottom: 0px;
            padding: @navbarSearchPadding;

            .btn {
              margin: 0px;
            }

            a:link, a:visited {
              margin-left: (@baseFontSize / 2);
              position: relative;
              top: 1px;

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

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

    .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: 6px;
              width: 32px;
              height: 32px;
              position: relative;
              bottom: 1px;
            }
          }
        }
      }
    }

    .navbar-compact {
      display: none;
      
      li {
        &.user-profile {
          &>a {
            &:link, &:visited {
              .border-radius(0);
              margin-top: 0px;
              padding: @baseFontSize;
              padding-top: 10px;
              padding-bottom: 8px;

              img {
                margin-right: 0px;
                margin-left: 6px;
              }

              .caret-border {
                background-color: @bodyBackground;
                border: 1px solid @navbarBorder;
                .border-radius(@baseBorderRadius);
                margin-left: 8px;
                padding: 0px 4px;

                .caret {
                  margin: 0px;
                  padding: 0px;
                  position: relative;
                  top: 13px;
                }
              }
            }

            &:hover, &:active {
              background-color: @bodyBackground;

              .caret-border {
                border-color: @grayLight;
              }
            }
          }

          &.open .dropdown-toggle {
            &:link, &:visited, &:hover, &:focus {
              background-color: @bodyBackground;

              .caret-border {
                background: @red;
                border-color: @red;

                .caret {
                  border-top-color: @white;
                }
              }
            }
          }

          .dropdown-menu {
            border: none;
            border: 1px solid darken(@navbarBorder, 10%);
            .border-radius(@baseBorderRadius);
            .box-shadow(0px 4px 3px fadeout(@gray, 30%));
            margin: 0px;
            margin-top: -6px;
            margin-right: 0px;
            padding: 4px 0px;
            width: 270px;

            &:before {
              margin-right: 11px;
            }

            &:after {
              border-bottom: 6px solid @white;
              margin-top: 0px;
              margin-right: 11px;
            }

            &>li {
              margin: 0px;
              padding: 0px;

              .label {
                float: right;
                margin: 0px;
                margin-top: 2px;
              }

              a, .btn-link {
                .border-radius(0);
                clear: none;
                display: block;
                float: none;
                margin: 0px;
                padding: 6px 12px;

                color: @textColor;
                font-weight: normal;
                text-align: left;
                
                i {
                  .opacity(100);
                }

                &:link, &:active, &:visited, &:hover {
                  .label {
                    background-color: @red;
                    float: right;

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

              a:link, a:visited {
                .opacity(80);
              }

              a:hover {
                background-color: @gray;
                .opacity(100);

                color: @white;
              }

              .btn-link {
                background: none;
                border: none;
                width: 100%;

                &:hover, &:active {
                  background: @red;
                  .opacity(100);

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

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

    .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);
        }
      }
    }
  }
}