Lidarr/src/UI/Content/menu.less

@import "prefixer";

@grid-float-breakpoint:     @screen-xs-min;

#main-menu-region {
  text-align    : center;
  margin-bottom : 10px;

  i:before {
    font-size : 35px;
  }

  i {
    width : 40px;
  }
  
  .navbar-nav, .navbar-nav>li {
    float          : none;
  }
  
  .navbar-brand {
    padding        : 0px;
  }
  
  .logo {
    margin-top     : 25px;
    vertical-align : middle;
    height         : 70px;
    width          : 70px;
    
    color: #ff0000;
    &:after {
      content: "unknown";
    }
    
    @media (min-width: @screen-xs-min) {
      &:after {
        content: "xs";
      }
    }
    
    @media (min-width: @screen-sm-min) {
      &:after {
        content: "sm";
      }
    }
    
    @media (min-width: @screen-md-min) {
      &:after {
        content: "md";
      }
    }
    
    @media (min-width: @screen-lg-min) {
      &:after {
        content: "lg";
      }
    }
  }

  li {
    list-style-type : none;
    display         : inline-block;
    position        : relative;

    a {

      &:focus {
        text-decoration : none;
      }

      display       : block;
      
      @media (max-width: @screen-xs-max) {
        border-radius : 6px;
        padding       : 15px 10px 5px;
        min-height    : 38px;
        min-width     : 42px;
        margin        : 20px 0px 5px;
      }
      
      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
        border-radius : 6px;
        padding       : 15px 10px 5px;
        min-height    : 76px;
        min-width     : 84px;
        margin        : 20px 0px 5px;
      }
      
      @media (min-width: @screen-md-min) {
        border-radius : 6px;
        padding       : 15px 10px 5px;
        min-height    : 76px;
        min-width     : 84px;
        margin        : 20px 10px 5px;
      }
      
      color         : #b9b9b9;
      font-weight   : 100;
    }
    span.label.pull-right {
      position : absolute;
      top      : 28px;
      right    : 18px;
    }
  }
}

.backdrop  {
  #nav-region {
    background-color : #000000;
    .opacity(0.85);
  }


}

#nav-region {
  margin-bottom : 80px;
  height        : 150px;

  .col-md-12 {
    margin-left : 0px;
  }

  li {
    a {
      &:hover {
        background-color : #555555;
        text-decoration  : none;
      }

      .label {
        cursor: pointer;
      }
    }
  }
}

.search {
  text-align: center;

  input, .input-group-addon {
    background-color: #333333;
    border-color: #333333;
    color: #cccccc;
  }

  ul {
    text-align: left;
  }

  .dropdown-menu {
    background-color: #333333;
    color: #cccccc;

    > li > a {
      color: #cccccc;
    }
  }
}