Misago/misago/emberapp/app/styles/_misago/header.less

//
// Page Header
// --------------------------------------------------


// Generic spacing and stuff
//
//##
.page-header {
  border-bottom-width: 1px;
  margin: 0px;
  margin-top: @line-height-computed * -1;
  margin-bottom: @line-height-computed;
  padding: @line-height-computed 0px;

  &.append-tabs {
    border-bottom: 0px;
    padding-bottom: @line-height-computed / 2;
  }

  &>.container {
    h1 {
      margin: 0px;
      padding: 0px;
      overflow: visible;

      font-size: @font-size-large * 1.5;

      img {
        border-radius: @border-radius-base;
        margin-top: -7px;
        margin-bottom: -1px;
        width: 32px;
      }

      .main, .sub {
        float: left;

        font-weight: normal;
      }

      .main {
        a {
          color: @text-color;
        }

        a:active {
          color: @state-clicked;
          text-decoration: underline;
        }
      }

      .sub {
        margin-left: @line-height-computed / 2;

        color: lighten(@text-color, 25%);
      }
    }
  }
}


// Breadcrumb
//
//##
.page-header {
  &>.container {
    .breadcrumb {
      margin-top: @line-height-computed * -0.8;
      margin-bottom: 0px;

      color: @breadcrumb-color;
      font-size: @font-size-small;

      &>li {
        + li:before {
          /* Tinysh hack to remove BS3's style */
          display: none;
        }

        a:link, a:visited {
          color: @state-default;
        }

        a:hover {
          color: @state-hover;
        }

        a:active, a:focus {
          color: @state-clicked;
        }

        span {
          margin: 0px 4px 0px 6px;
        }
      }
    }
  }
}


// Actions
//
//##
.page-header {
  &>.container {
    .page-actions {
      float: right;
      margin: -3px 0px;

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

      .pull-left {
        margin-left: @line-height-computed / 2;
      }

      &.path-fix {
        margin: -2px 0px;
        margin-bottom: -3px;
      }

      &.middle-fix {
        margin-top: (@line-height-computed * @headings-line-height) * -1 - (@line-height-computed * 1.5) + @padding-base-vertical - 1;
      }

      .dropdown-menu {
        left: auto;
        right: 0px;

        &:after {
          left: auto;
          right: 12px;
        }
      }
    }
  }
}

/* Small displays */
@media (max-width: @screen-sm-min) {
  .page-header {
    &>.container {
      .page-actions {
        clear: both;
        float: none;
        margin-top: @line-height-computed;

        .pull-left {
          margin-left: 0px;
          margin-right: @line-height-computed / 2;
        }
      }
    }
  }
}


// Details
//
//##
.page-header {
  &>.container {
    .page-details {
      display: block;
      clear: both;
      margin-bottom: 0;
      position: relative;
      top: @line-height-computed * 0.6;

      color: @text-muted;

      &>li {
        &>img {
          border-radius: @border-radius-small;
          position: relative;
          bottom: 1px;
        }

        &>button {
          background: none;
          border: none;
        }

        &>a:link, &>a:visited, &>button {
          color: @text-muted;
        }

        &>a:hover, &>button:hover {
          color: @state-hover;
          text-decoration: none;
        }

        &>a:active, &>button:active {
          color: @state-clicked;
          text-decoration: none;
        }
      }
    }
  }
}

/* Small displays */
@media (max-width: @screen-sm-min) {
  .page-header {
    &>.container {
      .page-details {
        margin-top: @line-height-computed;
      }
    }
  }
}


// Pills and Tabs
//
//##
.page-pills {
  border-bottom: 1px solid @page-header-border-color;
  margin: @line-height-computed * -1 0px @line-height-computed;
  padding: (@line-height-computed / 2) 0px;

  .nav-pills {
    margin: 0px;
  }
}

.page-tabs {
  border-bottom: 3px solid @page-header-border-color;
  margin: @line-height-computed * -1 0px @line-height-computed;
  padding: 0px;

  &.solo-right {
    .nav-tabs {
      margin-top: @line-height-computed * -1.5;
      float: right;
    }
  }

  .nav-tabs {
    margin: 0px;
    margin-bottom: -3px;
  }
}