Header label alignment (#1017)

Header label alignment (#1017)

Ensure 'browse site in' label is vertically centered

@import (inline) "../node_modules/openlayers/css/ol.css";
@import "../node_modules/bootstrap/less/bootstrap.less";
@icon-font-path: "bootstrap_fonts/";
@import "simplesearch.less";
@import "diff.less";
@import "sidemenu.less";
@import "feed.less";
@import "scrollbar.less";
@import "floatbuttons.less";
@import "stickyfilters.less";
@import "filters.less";
@import "other-icons.less";
@import "social-icons.less";
@import "waypoint-types.less";
@import "activities.less";
@import "viewdetails.less";
@import "profile.less";
@import "documentedit.less";
@import "creativecommons.less";
@import "helpers.less";
@import "images.less";
@import "map.less";
@import "404.less";
@import "homepage.less";
@import "variables.less";

html, body{
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: @body-color;
}

.modal-dialog {
  margin-top: 30vh;

  h3 {
    margin-bottom: 0;
  }
}

.documents-nav-buttons {
  display: inline-block;
  width: 100%;
  padding: 10px 2% 0 2%;

  button[protected-url-btn] {
    padding: 0 5px;
    font-size: 20px;
    float: left;
    height: 34px;
    span {
      top: 3px;
      font-size: 20px;
      width: 100%;
    }
  }
}
.add-waypoint, .add-route {
  margin: 1% 0 1% 0;
}

.page-main-title {
  color: white;
  height: @page-main-title-height;
  position: absolute;
  .calc(width, "100% - @{menu-width}");
  z-index: 31;
  text-align: center;
  padding-top: 2px;
  background-color: rgb(152, 181, 205);

  @media @tablet {
    .calc(width, "100% - @{menu-width-tablet}");
  }
  @media @phone {
    padding: 0;
    width: 100%;
    height: 35px;
    button {
      display: none;
    }
    h3 {
      margin: 0;
      padding: 1%;
    }
  }
  /*the filters button shown on mobile*/
  button {
    display: none;
    height: 24px;
    padding: 0 10px;
  }

  .badge {
    background-color: @C2C-orange;
  }
}

h1 {
  font-size: 3em;
}

#missing-langs, #other-langs {
  a {
    text-decoration: none;
  }
  .modal-header {
    margin-bottom: 1%;
  }
  .glyphicon {
    color: @C2C-orange;
    float: right;
    transition: 0.1s;
  }

  ul {
    flex-flow: wrap row;
    flex-direction: column;
    align-items: stretch;
    .flex();
    list-style: none;
    font-size: 1.2em;
    width: 16%;
    margin: auto;
    text-align: center;
    @media @phone {
      width: 38%;
    }
    @media @tablet {
      width: 25%;
    }
    li {
      color: #337ab7;
      cursor: pointer;
      height: 30px;
      transition: 0.1s;

      &:hover {
        font-size: 1.02em;

        .glyphicon {
          transition: 0.1s;
        }
      }

    }
  }
}

main {
  #missing-langs, #other-langs {
    display: none;
  }
}

.nav-tabs {
  display: none;
  text-align: center;
  @media @phone {
    display: block;
  }
  >li {
    display: inline-table;
    float: none;
  }

}
.thumbnail {
  padding: 0;
  margin-bottom: 10px;
}

.scroll-top-btn {
  border-radius: 50%;
  height: 40px;
  width: 40px;

  @media @phone {
    display: none;
  }
  .glyphicon {
    margin-left: -3px;
    margin-top: 3px;
  }
}

.glyphicon {
  color: @C2C-orange;
}

.translate-lang, .view-other-lang {
  .caret {
    color : #F6911A;
  }
}

.translate-lang {
  display: inline-block;
  margin-bottom: 10px;

  .dropdown-menu {
    padding: 0;

    li {
      cursor: pointer;
    }
  }
}
/*articles and areas have no .toggle-map*/
app-pagination.areas, app-pagination.articles app-pagination.books {
  @media @phone {
    #pagination {
      width: 100%;
    }
  }
}
#pagination {
  color: lightslategrey;
  float: right;

  @media @phone {
    position: fixed;
    align-items: baseline;
    .flex();
    justify-content: space-around;
    bottom: 0;
    z-index: 5;
    width: calc(~"100% - 50px"); /* 50px = .toggle-map btn width*/
    height: 45px;
    padding: 5px;
    left: 0;
    background-color: @lightgrey;

    ul {
      .flex();
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    .page-numbers  {
      width: 110px;
      display: block !important;
    }
  }

  .page-numbers {
    @media (max-width: @screen-sm-min){
      display: none;
    }
  }

  ul {
    display:inline-block;
    margin-bottom: 0;
    padding-left: 5px;
    width: 152px;

    li {
      display:inline-block;
      a {
        border-radius: 50%;
        width: 33px;
        height: 33px;
        background-color: @bright-green;
      }
      .glyphicon {
        top: 0;
        margin-left: -5px;
      }
      a,  .glyphicon {
        color:white;
      }
    }
  }
}

.toggle-map {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: @lightgrey;
  height: 45px;
  padding-top: 3px;
  button {
    float: right;
    margin-right: 10px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.3em;
    padding-left: 9px;
    padding-top: 8px;
  }
  @media @phone {
    display: block;
  }
}

.help-block {
  position: absolute;
  margin-top: -5px;
  margin-bottom: 0;

  p {
    display: none;
    font-size: 1em;
    color: white !important;
  }
}

.list {
  width:100%;
  padding: 1% 2% 2% 2%;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  @media @tablet {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  @media (max-width: @screen-sm-min) {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    padding-bottom: 50px;
  }
  .list-item {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
  }
  & + .no-results {
    display: none;
  }
}

.list-item {
  position: relative;
  cursor: pointer;
  background-color: white;
  margin-top: 10px;
  outline: none;
  border-radius: 7px;
  min-height: 80px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: .2s ease-in-out;
  border: 2px solid rgba(88, 150, 165, 0.2);

  &:active {
    -webkit-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -moz-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -webkit-transition: .2s ease-in-out;
    transition: 0.2s ease-in-out;
    outline: none;
  }
  &:hover, &.highlight {
    background-color: #EFEFEF;
    transition: 0.1s ease-in-out;
  }
  @media @tablet {
    border-width: 1px;
  }
  @media @phone {
    border-width: 1px;
    font-size: 1.2em;
  }

  .list-item-title {
    font-weight: bold;
    color: graytext;
    line-height: 5px;

    @media @tablet {
      font-size: 1em;
    }
  }

  .list-item-info {
    margin: auto;
    width: 100%;
    text-decoration: none;
    color: #919191;
    font-weight: normal;

    .quality, .orientations {
      white-space: nowrap;
      .glyphicon {
        margin-right: 3px;
      }
    }
    .elevation-max, .height-diff, .height-diff-difficulties, .orientations {
      margin-right: 8px;
    }
    .icon-rating {
      font-size: 1.4em;
      margin-left: -2px;
    }
    .rating {
      margin-right: 8px;
    }
    .orientations, .height-diff, .height-diff-difficulties, .elevation-max {
      white-space: nowrap;
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .global-rating {
      margin-bottom: 5px;
      @media (min-width: @phone-max) {
        display: none;
      }
    }
    .full-rating {
      margin-bottom: 5px;
      margin-top: 5px;
      flex-wrap: wrap;
      .glyphicon {
        font-size: 1.3em;
        margin-left: -3px;
        margin-right: 3px !important;
      }
      .value {
        transition: .2s;
        &:hover {
          color: gold;
        }
      }
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .glyphicon, [class*="icon-"]:not(.route-activity):not(.waypoint-type) {
      color: @bright-green;
    }
  }/*list-item-info*/

  .waypoint-type {
    font-size: 1.5em;
    color: @C2C-orange;
    margin-right: 5px;
    margin-top: 5px;
  }
  .route-activity {
    font-size: 3em;
    color: @C2C-orange;
    margin-bottom: 10px;
    @media @phone {
      font-size: 2.5em;
    }
  }
  /*list-item.*/
  &.main-waypoint {
    border: 2px solid @bright-green;
  }
  &.images {
    img {
      width: 100%;
    }
  }
  &.outings {
    min-height: 80px;
    .quality {
      display: block;
    }
    .elevation-max {
      display: block !important;
    }
    a {
      .flex() !important;
      height: 100%;
    }
    .outing-author, .outing-date {
      font-size: 0.9em;
    }
    .list-item-info {
      margin-left: 10px;
    }
    .outing-author {
      width: 33%;
      color: gray;
      margin-top: auto;
      margin-bottom: auto;

      .icon-user {
        font-size: 3em;
      }
    }
    .glyphicon-trash {
      top: 65% !important;
    }
  }
  .set-main-waypoint {
    margin: -10px 0 10px 10px;
  }
  a {
    display: block;
    transition: 0.2s;
    font-weight: normal;
    word-wrap: break-word;
    color: #767676;
    padding: 10px;

    .list-item-lang {
      opacity: 0.9;
      color: graytext;
      font-weight: normal;
    }

    &:hover {
      text-decoration: none;
    }

    &:hover .list-item-title {
      color: teal;
      transition: 0.1s ease-in-out;
    }
    &:focus {
      text-decoration: none;
      outline: none;
    }
    @media @phone {
      font-size: .8em;
    }
  } /*list-item a*/
  &.highlight a .list-item-title {
    color: teal;
    transition: 0.1s ease-in-out;
  }
} /* list-item*/

.line-separator{
  height:1px;
  background:#717171;
  border-bottom:1px solid @lightgrey;
  opacity: 0.9;
  margin: 3% 0 3% 0;
}

.map-right {
  float: left;
  position: relative;
  width: 40%;

  @media @phone {
    margin-left: 0;
    bottom: 40px;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 100%;
  }
  .map {
    @media @phone {
      -webkit-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      -moz-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      height: 250px;
      margin-top: 0;
      height: 80vh !important;
    }
    @media screen and (max-height: 330px) {
      height: 73vh !important;
    }
  }
}

.documents-list-section-container {
  position: relative;
  &.no-map .documents-list-section, &.no-map .page-main-title {
    width: 100%;
  }
}
.documents-list-section, .not-found-section, .map-right .map {
  margin-top: @page-main-title-height;
  .calc(height, "100vh - @{page-header-height} - @{page-main-title-height}");
}

.documents-list-section, .not-found-section {
  float: left;
  background-color: @lightgrey;
  position: relative;
  width: @list-width;
  overflow: auto;

  @media @phone {
    width: 100%;
    float:none;
    padding-top: 35px;
    .calc(height, "100vh - 92px");
  }
  .show-documents-filters-phone {
    display: none;
    height: 33px;
    margin-right: 5px;
    float: right;

    @media @phone {
      display: block;
    }
  }
}

.search-icon {
  font-size: 1.8em;
  margin-right: 8px;
  margin-top: 5px;

  @media @phone {
    cursor: pointer;
    /*hover triggers the search input to appear in simplesearch.js*/
  }
}

.login-text {

  margin-bottom: 0;
  @media @phone {
    display: none;
  }
}

app-user{
  text-align: center;

  .dropdown-toggle {
    min-height: 35px;
    align-items: center;

    @media @phone {
      padding: 1px 7px 0 7px;
    }
  }

  .icon-user, .glyphicon {
    color: white;
  }
  .icon-user {
    font-size: 2em;
  }
  .login-out-button {
    span {
      @media @phone {
        display: none;
      }
    }
  }
  .caret {
    @media @phone {
      display: none;
    }
  }
}
.user-info {
  @media @phone {
    display: none;
  }
}

.search {
  background-color: #FBFBFB !important;
  width : 380px;
  height: 35px;
  border-radius: 0 5px 5px 0;
  border: none;
  -webkit-transition: width .5s ease;
  -moz-transition: width .5s ease;
  transition: width .5s ease;

  @media @tablet {
    width: 150px;
  }
  @media @phone {
    border: 1px solid bisque;
  }
}

.lang-selector {
  .flex();
  width:100%;
  align-items: center;
  color: graytext;

  @media @phone {
    width: 46px;
  }
  > label {
    @media (max-width: 800px){
      display: none;
    }
  }
}

app-lang{
  margin-left: 10px;
  font-size: 1.2em;

  @media @phone {
    width: 105px;
    margin-left: 0;
  }
  .selected-lang {
    text-transform: uppercase;
    color: #676767;
  }
  .dropdown-toggle {
    padding: 6px 8px;
    @media @phone {
      padding: 6px 6px;
    }
  }
  .dropdown-menu {
    min-width: 91px;
    cursor: pointer;
  }
}

app-simple-search {
  .flex();
  border-radius: 6px;
  padding-left: 10px;
  margin-right: 10px;
  background: @C2C-orange;

  .glyphicon {
    color: #F9F9F9;
  }

  @media @phone {
    width: 40px;
    padding-left: 6px;
  }
}

.page-header {
  .flex();
  background-color: @body-color;
  position: absolute;
  width: 100%;
  border-bottom: 2px solid @C2C-orange !important;
  justify-content: flex-end;
  margin-top: 0;
  top: 0;
  margin-bottom: 0;
  border: 0;
  padding-bottom: 6px;
  padding-top: 5px;
  z-index: 33;

  @media @phone {
    position: fixed;
  }

  label {
    margin-bottom: 0;
  }

  #add-my-outing {
    margin-left: 10px;
    @media (max-width: 650px) {
      display: none;
    }
  }

  .show-search {
    position: absolute !important;
    left: 5px !important;
    z-index: 2;
    width: 100% !important;
    padding: 0 !important;
    transition: 0.3s ease-in-out;
  }

  .quick-search {
    rigth: 0;
    position: relative;
    transition: 0.3s ease-in-out;

    input {
      @media @phone {
        visibility: hidden;
        width: 0;
      }
    }
  }

  .search {
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    transition: width .5s ease;
    padding: 5px;
    &:focus, &:hover {
      width: 420px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      outline: none;
      border: 1px solid bisque;
      @media @tablet {
        width: 150px;
      }
      @media @phone {
        .calc(width, "100vw - 45px");
      }
    }
    @media @phone {
      width: 0;
      margin-left: -3px;
    }
  }
  .lang-user {
    .flex();
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
  }

  #user-menu {
    height: 33px;

    .icon-user {
      display: none;

      @media @phone {
        display: block;
      }
    }
    .caret {
      @media @phone {
        display:none;
      }
    }
    .user-info {
      @media @phone {
        display: none;
      }
    }
    a.logout {
      cursor: pointer;
    }
  }
}/* page-header */

.logo.header {
  position: relative;
  display: none;
  margin-left: 60px;
  margin-bottom: 6px;
  z-index: 34;
  width: 80px;

  @media (max-width: 1099px){
    display: block;
    top: 4px;
  }
  @media (max-width: @phone-max) {
    position: fixed;
  }
  img {
    height: 39px;
  }
}

.page-content {
  margin-top: @page-header-height;
  margin-left: @menu-width;

  @media @tablet {
    margin-left: @menu-width-tablet;
    margin-top:  9px;
  }
  @media @phone {
    margin-left: 0;
    margin-top: @page-header-height;
  }

  .archive-data {
    margin: 5px;
    padding: 5px;
    border: 1px solid red;
    background-color: rgba(255, 0, 0, 0.2);
  }

  .versions-list {
    border: 1px solid black;
    margin-bottom: 10px;
    border-collapse: collapse;

    th {
      padding: 5px;
      border: 1px solid black;
    }

    td {
      padding: 5px;
      border: 1px solid black;

      .hide-radio {
        visibility: hidden;
      }
    }
  }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

app-alerts {
  position: fixed;
  top: 30vh;
  left: 45vw;
  z-index: 9999;
  @media @phone {
    left: 5vw;
    width: 90%;
  }

  ul {
    list-style: none;
  }
  app-alert {
    text-align: left;
    -webkit-animation: fadein .3s;
    -moz-animation: fadein .3s;
    -ms-animation: fadein .3s;
    -o-animation: fadein .3s;
    animation: fadein .3s;
  }
  .alert {
    display: block !important;
    font-size: 1.2em;
    border: 1px solid #ccc !important;
  }
  .alert-text {
    display: inline;
  }
}

.auth-form, .preferences, .mailinglists {
  padding: 0 10% 0 10%;
  margin-top: 100px;
  margin-bottom: 20px;

  section {
    background-color: white;
    padding: 1% 5% 6% 5%;
    border: 1px solid #eee;
    border-radius: 5px;
  }

  @media @phone {
    margin-top: 70px;
    padding: 0 3% 0 3%;
  }
}

.archive-data {
  div {
    display: table;
    margin: auto;
  }
  h2, .glyphicon {
    color: @brand-danger;
    @media @phone {
      font-size: 1.4em;
    }
  }
  p {
    font-size: 1.3em;
    color: white;
    @media @phone {
      font-size: 1.1em;
    }
  }

  h2 {
    text-align: center;
    padding: 1%;
  }
  button a {
    text-decoration: none;
  }
}

.hidden-options {
  margin-bottom: 2%;
  padding: 0;
}

.document-history, .document-differences {
  padding: 5%;
  @media @tablet {
    padding-top: 7%;
  }
}

.versions-list {
  background-color: #EBEBEB;

  tr:first-of-type {
    background-color: #337AB7 !important;
    color: white;
  }
  td {
    .hide-radio {
      display: none;
    }
  }
}

button:focus {
  outline: none !important;
}

.form-control {
  border-radius: 2px;
}

.orange-btn, .gray-btn, .green-btn, .blue-btn {
  color: white;
  font-weight: bold;
  font-variant: small-caps;
  &:hover {
    color: white;
  }
  &:focus {
    color: white;
  }
  .glyphicon {
    color: white;
    margin-right: 5px;
  }
  a {
    color: white;
    &:hover {
      text-decoration: none;
    }
  }
  transition: 0.1s;
}
.orange-btn {
  background-color: @C2C-orange;
  &:hover {
    background-color: #FF9416;
    transition: 0.1s;
  }
}

.gray-btn {
  background-color: graytext;
  &:hover {
    background-color: #B89191;
    transition: 0.1s;
  }
}

.blue-btn {
  background-color: @brand-primary;
  &:hover {
    background-color: #286090;
    transition: 0.1s;
  }
}

.green-btn {
  background-color: @bright-green;
  &:hover {
    background-color: #4C9B5D;
    transition: 0.1s;
  }
}

.dropdown-toggle {
  font-variant: small-caps;
}

ul {
  padding-left: 15px;
}

.value, .value-title {
  font-weight: bold;
}
.value-title {
  color: darkslategray;
}
.value {
  color: darkgray;
  &.space {
    margin-left: 4px;
  }
}

.select-document {
  width: 170px;
  margin-right: 10px;
  float: left;
}

.section.associations, .view-details-section {
  .list-item {
    margin-right: .5%;
    margin-left: .5%;
    width: 49%;

    @media @big {
      width: 32%;
    }
    @media @phone {
      width: 100%;
    }
  }
  app-add-association, .associated-section {
    width: 100%;
    margin-top: 10px;
  }
  .associated-documents {
    max-height: 600px;
    overflow-y: auto;
    width: 100%;
    .flex();
    flex-wrap: wrap;

    app-delete-association {
      font-size: 15px;

      @media @phone {
        font-size: 14px;
      }
      .glyphicon {
        color: red;
      }
      button {
        padding: 5px;
      }
    }
  }
}

.glyphicon-trash:not(app-delete-association) {
  position: absolute;
  color: red;
  font-size: 1.3em;
  right: 10px;
  top: calc(~"100% - 30px");
}

#route-activities, #outing-activities, #image-activities {
  .route-activities {
    .flex();
    flex-flow: wrap;
    justify-content: center;
  }
}

.create-edit-document, .preferences {
  .section {
    .route-activities {
      @media @phone {
        justify-content: space-between;
      }
      .activity {
        width: 20%;
        text-align: center;
        cursor: pointer;
        @media (max-width: @screen-md-min) {
          width: 33%;
        }
      }
      [class^="icon-"] {
        font-size: 8em;
        @media @big {
          font-size: 9em;
        }
        @media (max-width: @screen-sm-min) {
          font-size: 6em;
        }
        @media (max-width: @screen-sm-max) {
          font-size: 7em;
        }
        @media @phone {
          font-size: 5em;
        }
      }
    }
  }
}

.preferences, .mailinglists {
  h3 {
    margin: 15px 0;
  }
}

.preferences {
  .followed-only {
    margin-top: 15px;
    span {
      font-size: 1em;
      font-weight: normal;
    }
  }
  .preferences-activities .route-activity {
    font-size: 5em;
    margin-bottom: 10px;
    @media @big {
      font-size: 7em;
    }
  }
  .preferences-activities, .preferences-areas {
    border-top: 1px solid rgba(221, 221, 221, 0.5);
    margin-top: 30px;
  }
  .areas .list-item {
    flex-basis: 33%;
    margin-right: 10px;
  }
  app-simple-search {
    width: 50%;
    margin-bottom: 10px;

    .search {
      width: 100% !important;
    }
  }
  @media @phone {
    app-simple-search {
      width: 100%;
    }
    .list-item {
      flex-basis: 100% !important;
    }
    .route-activity {
      font-size: 4em;
    }
  }
}

@import (inline) "../node_modules/openlayers/css/ol.css";
@import "../node_modules/bootstrap/less/bootstrap.less";
@icon-font-path: "bootstrap_fonts/";
@import "simplesearch.less";
@import "diff.less";
@import "sidemenu.less";
@import "feed.less";
@import "scrollbar.less";
@import "floatbuttons.less";
@import "stickyfilters.less";
@import "filters.less";
@import "other-icons.less";
@import "social-icons.less";
@import "waypoint-types.less";
@import "activities.less";
@import "viewdetails.less";
@import "profile.less";
@import "documentedit.less";
@import "creativecommons.less";
@import "helpers.less";
@import "images.less";
@import "map.less";
@import "404.less";
@import "homepage.less";
@import "variables.less";

html, body{
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: @body-color;
}

.modal-dialog {
  margin-top: 30vh;

  h3 {
    margin-bottom: 0;
  }
}

.documents-nav-buttons {
  display: inline-block;
  width: 100%;
  padding: 10px 2% 0 2%;

  button[protected-url-btn] {
    padding: 0 5px;
    font-size: 20px;
    float: left;
    height: 34px;
    span {
      top: 3px;
      font-size: 20px;
      width: 100%;
    }
  }
}
.add-waypoint, .add-route {
  margin: 1% 0 1% 0;
}

.page-main-title {
  color: white;
  height: @page-main-title-height;
  position: absolute;
  .calc(width, "100% - @{menu-width}");
  z-index: 31;
  text-align: center;
  padding-top: 2px;
  background-color: rgb(152, 181, 205);

  @media @tablet {
    .calc(width, "100% - @{menu-width-tablet}");
  }
  @media @phone {
    padding: 0;
    width: 100%;
    height: 35px;
    button {
      display: none;
    }
    h3 {
      margin: 0;
      padding: 1%;
    }
  }
  /*the filters button shown on mobile*/
  button {
    display: none;
    height: 24px;
    padding: 0 10px;
  }

  .badge {
    background-color: @C2C-orange;
  }
}

h1 {
  font-size: 3em;
}

#missing-langs, #other-langs {
  a {
    text-decoration: none;
  }
  .modal-header {
    margin-bottom: 1%;
  }
  .glyphicon {
    color: @C2C-orange;
    float: right;
    transition: 0.1s;
  }

  ul {
    flex-flow: wrap row;
    flex-direction: column;
    align-items: stretch;
    .flex();
    list-style: none;
    font-size: 1.2em;
    width: 16%;
    margin: auto;
    text-align: center;
    @media @phone {
      width: 38%;
    }
    @media @tablet {
      width: 25%;
    }
    li {
      color: #337ab7;
      cursor: pointer;
      height: 30px;
      transition: 0.1s;

      &:hover {
        font-size: 1.02em;

        .glyphicon {
          transition: 0.1s;
        }
      }

    }
  }
}

main {
  #missing-langs, #other-langs {
    display: none;
  }
}

.nav-tabs {
  display: none;
  text-align: center;
  @media @phone {
    display: block;
  }
  >li {
    display: inline-table;
    float: none;
  }

}
.thumbnail {
  padding: 0;
  margin-bottom: 10px;
}

.scroll-top-btn {
  border-radius: 50%;
  height: 40px;
  width: 40px;

  @media @phone {
    display: none;
  }
  .glyphicon {
    margin-left: -3px;
    margin-top: 3px;
  }
}

.glyphicon {
  color: @C2C-orange;
}

.translate-lang, .view-other-lang {
  .caret {
    color : #F6911A;
  }
}

.translate-lang {
  display: inline-block;
  margin-bottom: 10px;

  .dropdown-menu {
    padding: 0;

    li {
      cursor: pointer;
    }
  }
}
/*articles and areas have no .toggle-map*/
app-pagination.areas, app-pagination.articles app-pagination.books {
  @media @phone {
    #pagination {
      width: 100%;
    }
  }
}
#pagination {
  color: lightslategrey;
  float: right;

  @media @phone {
    position: fixed;
    align-items: baseline;
    .flex();
    justify-content: space-around;
    bottom: 0;
    z-index: 5;
    width: calc(~"100% - 50px"); /* 50px = .toggle-map btn width*/
    height: 45px;
    padding: 5px;
    left: 0;
    background-color: @lightgrey;

    ul {
      .flex();
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
    .page-numbers  {
      width: 110px;
      display: block !important;
    }
  }

  .page-numbers {
    @media (max-width: @screen-sm-min){
      display: none;
    }
  }

  ul {
    display:inline-block;
    margin-bottom: 0;
    padding-left: 5px;
    width: 152px;

    li {
      display:inline-block;
      a {
        border-radius: 50%;
        width: 33px;
        height: 33px;
        background-color: @bright-green;
      }
      .glyphicon {
        top: 0;
        margin-left: -5px;
      }
      a,  .glyphicon {
        color:white;
      }
    }
  }
}

.toggle-map {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: @lightgrey;
  height: 45px;
  padding-top: 3px;
  button {
    float: right;
    margin-right: 10px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.3em;
    padding-left: 9px;
    padding-top: 8px;
  }
  @media @phone {
    display: block;
  }
}

.help-block {
  position: absolute;
  margin-top: -5px;
  margin-bottom: 0;

  p {
    display: none;
    font-size: 1em;
    color: white !important;
  }
}

.list {
  width:100%;
  padding: 1% 2% 2% 2%;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;

  @media @tablet {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  @media (max-width: @screen-sm-min) {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    padding-bottom: 50px;
  }
  .list-item {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
  }
  & + .no-results {
    display: none;
  }
}

.list-item {
  position: relative;
  cursor: pointer;
  background-color: white;
  margin-top: 10px;
  outline: none;
  border-radius: 7px;
  min-height: 80px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: .2s ease-in-out;
  border: 2px solid rgba(88, 150, 165, 0.2);

  &:active {
    -webkit-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -moz-box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    box-shadow: inset 1px 1px 8px -3px rgba(0,0,0,.75);
    -webkit-transition: .2s ease-in-out;
    transition: 0.2s ease-in-out;
    outline: none;
  }
  &:hover, &.highlight {
    background-color: #EFEFEF;
    transition: 0.1s ease-in-out;
  }
  @media @tablet {
    border-width: 1px;
  }
  @media @phone {
    border-width: 1px;
    font-size: 1.2em;
  }

  .list-item-title {
    font-weight: bold;
    color: graytext;
    line-height: 5px;

    @media @tablet {
      font-size: 1em;
    }
  }

  .list-item-info {
    margin: auto;
    width: 100%;
    text-decoration: none;
    color: #919191;
    font-weight: normal;

    .quality, .orientations {
      white-space: nowrap;
      .glyphicon {
        margin-right: 3px;
      }
    }
    .elevation-max, .height-diff, .height-diff-difficulties, .orientations {
      margin-right: 8px;
    }
    .icon-rating {
      font-size: 1.4em;
      margin-left: -2px;
    }
    .rating {
      margin-right: 8px;
    }
    .orientations, .height-diff, .height-diff-difficulties, .elevation-max {
      white-space: nowrap;
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .global-rating {
      margin-bottom: 5px;
      @media (min-width: @phone-max) {
        display: none;
      }
    }
    .full-rating {
      margin-bottom: 5px;
      margin-top: 5px;
      flex-wrap: wrap;
      .glyphicon {
        font-size: 1.3em;
        margin-left: -3px;
        margin-right: 3px !important;
      }
      .value {
        transition: .2s;
        &:hover {
          color: gold;
        }
      }
      @media (max-width: @phone-max) {
        display: none;
      }
    }
    .glyphicon, [class*="icon-"]:not(.route-activity):not(.waypoint-type) {
      color: @bright-green;
    }
  }/*list-item-info*/

  .waypoint-type {
    font-size: 1.5em;
    color: @C2C-orange;
    margin-right: 5px;
    margin-top: 5px;
  }
  .route-activity {
    font-size: 3em;
    color: @C2C-orange;
    margin-bottom: 10px;
    @media @phone {
      font-size: 2.5em;
    }
  }
  /*list-item.*/
  &.main-waypoint {
    border: 2px solid @bright-green;
  }
  &.images {
    img {
      width: 100%;
    }
  }
  &.outings {
    min-height: 80px;
    .quality {
      display: block;
    }
    .elevation-max {
      display: block !important;
    }
    a {
      .flex() !important;
      height: 100%;
    }
    .outing-author, .outing-date {
      font-size: 0.9em;
    }
    .list-item-info {
      margin-left: 10px;
    }
    .outing-author {
      width: 33%;
      color: gray;
      margin-top: auto;
      margin-bottom: auto;

      .icon-user {
        font-size: 3em;
      }
    }
    .glyphicon-trash {
      top: 65% !important;
    }
  }
  .set-main-waypoint {
    margin: -10px 0 10px 10px;
  }
  a {
    display: block;
    transition: 0.2s;
    font-weight: normal;
    word-wrap: break-word;
    color: #767676;
    padding: 10px;

    .list-item-lang {
      opacity: 0.9;
      color: graytext;
      font-weight: normal;
    }

    &:hover {
      text-decoration: none;
    }

    &:hover .list-item-title {
      color: teal;
      transition: 0.1s ease-in-out;
    }
    &:focus {
      text-decoration: none;
      outline: none;
    }
    @media @phone {
      font-size: .8em;
    }
  } /*list-item a*/
  &.highlight a .list-item-title {
    color: teal;
    transition: 0.1s ease-in-out;
  }
} /* list-item*/

.line-separator{
  height:1px;
  background:#717171;
  border-bottom:1px solid @lightgrey;
  opacity: 0.9;
  margin: 3% 0 3% 0;
}

.map-right {
  float: left;
  position: relative;
  width: 40%;

  @media @phone {
    margin-left: 0;
    bottom: 40px;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 100%;
  }
  .map {
    @media @phone {
      -webkit-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      -moz-box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      box-shadow: 0 0 36px -10px rgba(0,0,0,0.56);
      height: 250px;
      margin-top: 0;
      height: 80vh !important;
    }
    @media screen and (max-height: 330px) {
      height: 73vh !important;
    }
  }
}

.documents-list-section-container {
  position: relative;
  &.no-map .documents-list-section, &.no-map .page-main-title {
    width: 100%;
  }
}
.documents-list-section, .not-found-section, .map-right .map {
  margin-top: @page-main-title-height;
  .calc(height, "100vh - @{page-header-height} - @{page-main-title-height}");
}

.documents-list-section, .not-found-section {
  float: left;
  background-color: @lightgrey;
  position: relative;
  width: @list-width;
  overflow: auto;

  @media @phone {
    width: 100%;
    float:none;
    padding-top: 35px;
    .calc(height, "100vh - 92px");
  }
  .show-documents-filters-phone {
    display: none;
    height: 33px;
    margin-right: 5px;
    float: right;

    @media @phone {
      display: block;
    }
  }
}

.search-icon {
  font-size: 1.8em;
  margin-right: 8px;
  margin-top: 5px;

  @media @phone {
    cursor: pointer;
    /*hover triggers the search input to appear in simplesearch.js*/
  }
}

.login-text {

  margin-bottom: 0;
  @media @phone {
    display: none;
  }
}

app-user{
  text-align: center;

  .dropdown-toggle {
    min-height: 35px;
    align-items: center;

    @media @phone {
      padding: 1px 7px 0 7px;
    }
  }

  .icon-user, .glyphicon {
    color: white;
  }
  .icon-user {
    font-size: 2em;
  }
  .login-out-button {
    span {
      @media @phone {
        display: none;
      }
    }
  }
  .caret {
    @media @phone {
      display: none;
    }
  }
}
.user-info {
  @media @phone {
    display: none;
  }
}

.search {
  background-color: #FBFBFB !important;
  width : 380px;
  height: 35px;
  border-radius: 0 5px 5px 0;
  border: none;
  -webkit-transition: width .5s ease;
  -moz-transition: width .5s ease;
  transition: width .5s ease;

  @media @tablet {
    width: 150px;
  }
  @media @phone {
    border: 1px solid bisque;
  }
}

.lang-selector {
  .flex();
  width:100%;
  align-items: center;
  color: graytext;

  @media @phone {
    width: 46px;
  }
  > label {
    @media (max-width: 800px){
      display: none;
    }
  }
}

app-lang{
  margin-left: 10px;
  font-size: 1.2em;

  @media @phone {
    width: 105px;
    margin-left: 0;
  }
  .selected-lang {
    text-transform: uppercase;
    color: #676767;
  }
  .dropdown-toggle {
    padding: 6px 8px;
    @media @phone {
      padding: 6px 6px;
    }
  }
  .dropdown-menu {
    min-width: 91px;
    cursor: pointer;
  }
}

app-simple-search {
  .flex();
  border-radius: 6px;
  padding-left: 10px;
  margin-right: 10px;
  background: @C2C-orange;

  .glyphicon {
    color: #F9F9F9;
  }

  @media @phone {
    width: 40px;
    padding-left: 6px;
  }
}

.page-header {
  .flex();
  background-color: @body-color;
  position: absolute;
  width: 100%;
  border-bottom: 2px solid @C2C-orange !important;
  justify-content: flex-end;
  margin-top: 0;
  top: 0;
  margin-bottom: 0;
  border: 0;
  padding-bottom: 6px;
  padding-top: 5px;
  z-index: 33;

  @media @phone {
    position: fixed;
  }
  #add-my-outing {
    margin-left: 10px;
    @media (max-width: 650px) {
      display: none;
    }
  }

  .show-search {
    position: absolute !important;
    left: 5px !important;
    z-index: 2;
    width: 100% !important;
    padding: 0 !important;
    transition: 0.3s ease-in-out;
  }

  .quick-search {
    rigth: 0;
    position: relative;
    transition: 0.3s ease-in-out;

    input {
      @media @phone {
        visibility: hidden;
        width: 0;
      }
    }
  }

  .search {
    -webkit-transition: width .5s ease;
    -moz-transition: width .5s ease;
    transition: width .5s ease;
    padding: 5px;
    &:focus, &:hover {
      width: 420px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      outline: none;
      border: 1px solid bisque;
      @media @tablet {
        width: 150px;
      }
      @media @phone {
        .calc(width, "100vw - 45px");
      }
    }
    @media @phone {
      width: 0;
      margin-left: -3px;
    }
  }
  .lang-user {
    .flex();
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
  }

  #user-menu {
    height: 33px;

    .icon-user {
      display: none;

      @media @phone {
        display: block;
      }
    }
    .caret {
      @media @phone {
        display:none;
      }
    }
    .user-info {
      @media @phone {
        display: none;
      }
    }
    a.logout {
      cursor: pointer;
    }
  }
}/* page-header */

.logo.header {
  position: relative;
  display: none;
  margin-left: 60px;
  margin-bottom: 6px;
  z-index: 34;
  width: 80px;

  @media (max-width: 1099px){
    display: block;
    top: 4px;
  }
  @media (max-width: @phone-max) {
    position: fixed;
  }
  img {
    height: 39px;
  }
}

.page-content {
  margin-top: @page-header-height;
  margin-left: @menu-width;

  @media @tablet {
    margin-left: @menu-width-tablet;
    margin-top:  9px;
  }
  @media @phone {
    margin-left: 0;
    margin-top: @page-header-height;
  }

  .archive-data {
    margin: 5px;
    padding: 5px;
    border: 1px solid red;
    background-color: rgba(255, 0, 0, 0.2);
  }

  .versions-list {
    border: 1px solid black;
    margin-bottom: 10px;
    border-collapse: collapse;

    th {
      padding: 5px;
      border: 1px solid black;
    }

    td {
      padding: 5px;
      border: 1px solid black;

      .hide-radio {
        visibility: hidden;
      }
    }
  }
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

app-alerts {
  position: fixed;
  top: 30vh;
  left: 45vw;
  z-index: 9999;
  @media @phone {
    left: 5vw;
    width: 90%;
  }

  ul {
    list-style: none;
  }
  app-alert {
    text-align: left;
    -webkit-animation: fadein .3s;
    -moz-animation: fadein .3s;
    -ms-animation: fadein .3s;
    -o-animation: fadein .3s;
    animation: fadein .3s;
  }
  .alert {
    display: block !important;
    font-size: 1.2em;
    border: 1px solid #ccc !important;
  }
  .alert-text {
    display: inline;
  }
}

.auth-form, .preferences, .mailinglists {
  padding: 0 10% 0 10%;
  margin-top: 100px;
  margin-bottom: 20px;

  section {
    background-color: white;
    padding: 1% 5% 6% 5%;
    border: 1px solid #eee;
    border-radius: 5px;
  }

  @media @phone {
    margin-top: 70px;
    padding: 0 3% 0 3%;
  }
}

.archive-data {
  div {
    display: table;
    margin: auto;
  }
  h2, .glyphicon {
    color: @brand-danger;
    @media @phone {
      font-size: 1.4em;
    }
  }
  p {
    font-size: 1.3em;
    color: white;
    @media @phone {
      font-size: 1.1em;
    }
  }

  h2 {
    text-align: center;
    padding: 1%;
  }
  button a {
    text-decoration: none;
  }
}

.hidden-options {
  margin-bottom: 2%;
  padding: 0;
}

.document-history, .document-differences {
  padding: 5%;
  @media @tablet {
    padding-top: 7%;
  }
}

.versions-list {
  background-color: #EBEBEB;

  tr:first-of-type {
    background-color: #337AB7 !important;
    color: white;
  }
  td {
    .hide-radio {
      display: none;
    }
  }
}

button:focus {
  outline: none !important;
}

.form-control {
  border-radius: 2px;
}

.orange-btn, .gray-btn, .green-btn, .blue-btn {
  color: white;
  font-weight: bold;
  font-variant: small-caps;
  &:hover {
    color: white;
  }
  &:focus {
    color: white;
  }
  .glyphicon {
    color: white;
    margin-right: 5px;
  }
  a {
    color: white;
    &:hover {
      text-decoration: none;
    }
  }
  transition: 0.1s;
}
.orange-btn {
  background-color: @C2C-orange;
  &:hover {
    background-color: #FF9416;
    transition: 0.1s;
  }
}

.gray-btn {
  background-color: graytext;
  &:hover {
    background-color: #B89191;
    transition: 0.1s;
  }
}

.blue-btn {
  background-color: @brand-primary;
  &:hover {
    background-color: #286090;
    transition: 0.1s;
  }
}

.green-btn {
  background-color: @bright-green;
  &:hover {
    background-color: #4C9B5D;
    transition: 0.1s;
  }
}

.dropdown-toggle {
  font-variant: small-caps;
}

ul {
  padding-left: 15px;
}

.value, .value-title {
  font-weight: bold;
}
.value-title {
  color: darkslategray;
}
.value {
  color: darkgray;
  &.space {
    margin-left: 4px;
  }
}

.select-document {
  width: 170px;
  margin-right: 10px;
  float: left;
}

.section.associations, .view-details-section {
  .list-item {
    margin-right: .5%;
    margin-left: .5%;
    width: 49%;

    @media @big {
      width: 32%;
    }
    @media @phone {
      width: 100%;
    }
  }
  app-add-association, .associated-section {
    width: 100%;
    margin-top: 10px;
  }
  .associated-documents {
    max-height: 600px;
    overflow-y: auto;
    width: 100%;
    .flex();
    flex-wrap: wrap;

    app-delete-association {
      font-size: 15px;

      @media @phone {
        font-size: 14px;
      }
      .glyphicon {
        color: red;
      }
      button {
        padding: 5px;
      }
    }
  }
}

.glyphicon-trash:not(app-delete-association) {
  position: absolute;
  color: red;
  font-size: 1.3em;
  right: 10px;
  top: calc(~"100% - 30px");
}

#route-activities, #outing-activities, #image-activities {
  .route-activities {
    .flex();
    flex-flow: wrap;
    justify-content: center;
  }
}

.create-edit-document, .preferences {
  .section {
    .route-activities {
      @media @phone {
        justify-content: space-between;
      }
      .activity {
        width: 20%;
        text-align: center;
        cursor: pointer;
        @media (max-width: @screen-md-min) {
          width: 33%;
        }
      }
      [class^="icon-"] {
        font-size: 8em;
        @media @big {
          font-size: 9em;
        }
        @media (max-width: @screen-sm-min) {
          font-size: 6em;
        }
        @media (max-width: @screen-sm-max) {
          font-size: 7em;
        }
        @media @phone {
          font-size: 5em;
        }
      }
    }
  }
}

.preferences, .mailinglists {
  h3 {
    margin: 15px 0;
  }
}

.preferences {
  .followed-only {
    margin-top: 15px;
    span {
      font-size: 1em;
      font-weight: normal;
    }
  }
  .preferences-activities .route-activity {
    font-size: 5em;
    margin-bottom: 10px;
    @media @big {
      font-size: 7em;
    }
  }
  .preferences-activities, .preferences-areas {
    border-top: 1px solid rgba(221, 221, 221, 0.5);
    margin-top: 30px;
  }
  .areas .list-item {
    flex-basis: 33%;
    margin-right: 10px;
  }
  app-simple-search {
    width: 50%;
    margin-bottom: 10px;

    .search {
      width: 100% !important;
    }
  }
  @media @phone {
    app-simple-search {
      width: 100%;
    }
    .list-item {
      flex-basis: 100% !important;
    }
    .route-activity {
      font-size: 4em;
    }
  }
}


Fix perf regression caused by `flex-flow: column` on pane item views

For some reason, having flex-flow column on the pane item views
container was forcing the entire view to be repainted on cursor
movement and line edits. Allowing the container to flow row-wise and
setting the min-height to 0 instead of min-content-height achieves
the same layout effect without the huge repaint cost. Flexbox is a
fragile bitch.

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#root-view {
  height: 100%;
  overflow: hidden;
  position: relative;

  #horizontal {
    display: -webkit-flex;
    height: 100%;
  }

  #vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-flow: column;
  }
}

#panes {
  position: relative;
  -webkit-flex: 1;

  .column {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: hidden;
  }

  .row {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
  }

  .pane {
    position: absolute;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }

  .pane .item-views {
    -webkit-flex: 1;
    display: -webkit-flex;
    min-height: 0;
  }

  .pane .item-views > * {
    -webkit-flex: 1;
    min-height: 0;
  }
}

@font-face {
  font-family: 'Octicons Regular';
  src: url("octicons-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#root-view {
  height: 100%;
  overflow: hidden;
  position: relative;

  #horizontal {
    display: -webkit-flex;
    height: 100%;
  }

  #vertical {
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-flow: column;
  }
}

#panes {
  position: relative;
  -webkit-flex: 1;

  .column {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: hidden;
  }

  .row {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
  }

  .pane {
    position: absolute;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }

  .pane .item-views {
    -webkit-flex: 1;
    display: -webkit-flex;
    -webkit-flex-flow: column;
  }

  .pane .item-views > * {
    -webkit-flex: 1;
    min-height: 0;
  }
}

@font-face {
  font-family: 'Octicons Regular';
  src: url("octicons-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


Added cursor pointer to the sidebar folder (#582)

* Added curosr pointer to the sidebar folder

* Changed Cursor position from default

* Update sidebarTheme.css

* Fixed Extra trailing whitespaces

/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Styles for jsTree control */
/* (these are based on jsTree's default theme .css file, so they are not very LESS-like) */
@li-min-height: 23px;

.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
.jstree li { display:block; min-height:@li-min-height; line-height:16px; white-space:nowrap; margin-left:18px; min-width:18px; }
.jstree-rtl li { margin-left:0; margin-right:18px; }
.jstree > ul > li { margin-left:0px; }
.jstree-rtl > ul > li { margin-right:0px; }
.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
.jstree a:focus { outline: none; }
.jstree a > ins { height:16px; width:16px; }
.jstree a > .jstree-icon { margin-right:3px; }
.jstree-rtl a > .jstree-icon { margin-left:3px; margin-right:0; }
li.jstree-open > ul { display:block; }
li.jstree-closed > ul { display:none; }

.jstree-brackets li,
.jstree-brackets ins { background-image:url("images/jsTreeSprites.svg"); background-repeat:no-repeat; background-color:transparent; }
.jstree-brackets li { background-position:-90px 0; background-repeat:repeat-y; }
.jstree-brackets li.jstree-last { background:transparent; }
.jstree-brackets .jstree-open > ins { background-position:-72px 0; }
.jstree-brackets .jstree-closed > ins { background-position:-54px 0; }
.jstree-brackets .jstree-leaf > ins { background-position:-36px 0; }

.jstree-brackets li a:hover {
    text-decoration: none;
}

@jstree-icon-backindent: 12px;

/* Make the links in the JS tree the width of the container
 * by shifting the off the screen by negative margin and moving the
 * content back by pushing the padding. The icons are positioned absolute
 * relative to the containing list item so they sit above the a's background.
 * This also means we need to include the size of the sprite in the padding
 * so the text ends up back in the same spot visually
 */
.jstree-brackets li > a {
    @jstree-icon-text-overlap: 2px;
    padding-left: (@jstree-sprite-size - @jstree-icon-backindent - @jstree-icon-text-overlap);
    display: block;
}

.jstree li {
    position: relative;
}

.jstree-brackets li {
    vertical-align: baseline;
    a,
    a:hover {
        color: @project-panel-text-1;
        font-size: 13px;
        cursor: pointer;

        &.jstree-clicked, &.jstree-clicked .extension {
            color: @open-working-file-name-highlight;
        }
    }
    .extension {
        color: @project-panel-text-2;
    }
    &.jstree-closed, &.jstree-open {
        margin-left: 10px;
        > a {
            color: @project-panel-text-2;
        }
    }
    &.jstree-leaf {
        margin-left: 10px;
    }
}

.jstree ins {
    position: absolute;
}
ins.jstree-icon {
    left: -@jstree-icon-backindent !important;
}

.jstree-brackets a .jstree-icon { background-position:-56px -19px; }
.jstree-brackets a.jstree-loading .jstree-icon { background:url("images/throbber.gif") center center no-repeat !important; }

.jstree-brackets li > a {
    padding-top: 3px;
    padding-bottom: 3px;
}
.jstree-brackets li > ins {
    margin-top: 2px;
    margin-bottom: 2px;
}

// These styles control the expand/collapse arrow icons. Most other styles in this file with background-position are unused.
.jstree-brackets .jstree-no-dots li,
.jstree-brackets .jstree-no-dots .jstree-leaf > ins { background:transparent; }
.jstree-brackets .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
.jstree-brackets .jstree-no-dots .jstree-closed > ins { background-position:0 0; }

.jstree-brackets .jstree-no-icons a .jstree-icon { display:none; }

.jstree-brackets .jstree-search { font-style:italic; }

.jstree-brackets .jstree-no-icons .jstree-checkbox { display:inline-block; }
.jstree-brackets .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }

#vakata-dragged.jstree-brackets ins { background:transparent !important; }
#vakata-dragged.jstree-brackets .jstree-ok { background:url("images/jsTreeSprites.svg") -2px -53px no-repeat !important; }
#vakata-dragged.jstree-brackets .jstree-invalid { background:url("images/jsTreeSprites.svg") -18px -53px no-repeat !important; }
#jstree-marker.jstree-brackets { background:url("images/jsTreeSprites.svg") -41px -57px no-repeat !important; text-indent:-100px; }

.jstree-brackets a.jstree-search { color:aqua; }
.jstree-brackets .jstree-locked a { color:silver; cursor:default; }

#project-files-container .jstree-brackets .jstree-rename-input {
    background: #000;
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: @bc-shadow-small;
    box-sizing: border-box;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    left: 3px !important;
    top: 2px !important;
    margin: 0;
    padding: 0;
    position: relative;
    width: 150px;
    height: 17px;
    line-height: 17px;
}

#project-files-container .jstree-brackets .jstree-rename-input:focus {
    border: 1px solid @bc-btn-border-focused;
    box-shadow: none;
    outline: none;
}

#vakata-contextmenu.jstree-brackets-context,
#vakata-contextmenu.jstree-brackets-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
#vakata-contextmenu.jstree-brackets-context li { }
#vakata-contextmenu.jstree-brackets-context a { color:black; }
#vakata-contextmenu.jstree-brackets-context a:hover,
#vakata-contextmenu.jstree-brackets-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a,
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
#vakata-contextmenu.jstree-brackets-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
#vakata-contextmenu.jstree-brackets-context li ul { margin-left:-4px; }

/*
 * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a
 * copy of this software and associated documentation files (the "Software"),
 * to deal in the Software without restriction, including without limitation
 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 * and/or sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 *
 */

/* Styles for jsTree control */
/* (these are based on jsTree's default theme .css file, so they are not very LESS-like) */
@li-min-height: 23px;

.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; }
.jstree li { display:block; min-height:@li-min-height; line-height:16px; white-space:nowrap; margin-left:18px; min-width:18px; }
.jstree-rtl li { margin-left:0; margin-right:18px; }
.jstree > ul > li { margin-left:0px; }
.jstree-rtl > ul > li { margin-right:0px; }
.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; }
.jstree a:focus { outline: none; }
.jstree a > ins { height:16px; width:16px; }
.jstree a > .jstree-icon { margin-right:3px; }
.jstree-rtl a > .jstree-icon { margin-left:3px; margin-right:0; }
li.jstree-open > ul { display:block; }
li.jstree-closed > ul { display:none; }

.jstree-brackets li,
.jstree-brackets ins { background-image:url("images/jsTreeSprites.svg"); background-repeat:no-repeat; background-color:transparent; }
.jstree-brackets li { background-position:-90px 0; background-repeat:repeat-y; }
.jstree-brackets li.jstree-last { background:transparent; }
.jstree-brackets .jstree-open > ins { background-position:-72px 0; }
.jstree-brackets .jstree-closed > ins { background-position:-54px 0; }
.jstree-brackets .jstree-leaf > ins { background-position:-36px 0; }

.jstree-brackets li a:hover {
    text-decoration: none;
}

@jstree-icon-backindent: 12px;

/* Make the links in the JS tree the width of the container
 * by shifting the off the screen by negative margin and moving the
 * content back by pushing the padding. The icons are positioned absolute
 * relative to the containing list item so they sit above the a's background.
 * This also means we need to include the size of the sprite in the padding
 * so the text ends up back in the same spot visually
 */
.jstree-brackets li > a {
    @jstree-icon-text-overlap: 2px;
    padding-left: (@jstree-sprite-size - @jstree-icon-backindent - @jstree-icon-text-overlap);
    display: block;
}

.jstree li {
    position: relative;
}

.jstree-brackets li {
    vertical-align: baseline;
    a,
    a:hover {
        color: @project-panel-text-1;
        font-size: 13px;
        cursor: default;

        &.jstree-clicked, &.jstree-clicked .extension {
            color: @open-working-file-name-highlight;
        }
    }
    .extension {
        color: @project-panel-text-2;
    }
    &.jstree-closed, &.jstree-open {
        margin-left: 10px;
        > a {
            color: @project-panel-text-2;
        }
    }
    &.jstree-leaf {
        margin-left: 10px;
    }
}

.jstree ins {
    position: absolute;
}
ins.jstree-icon {
    left: -@jstree-icon-backindent !important;
}

.jstree-brackets a .jstree-icon { background-position:-56px -19px; }
.jstree-brackets a.jstree-loading .jstree-icon { background:url("images/throbber.gif") center center no-repeat !important; }

.jstree-brackets li > a {
    padding-top: 3px;
    padding-bottom: 3px;
}
.jstree-brackets li > ins {
    margin-top: 2px;
    margin-bottom: 2px;
}

// These styles control the expand/collapse arrow icons. Most other styles in this file with background-position are unused.
.jstree-brackets .jstree-no-dots li,
.jstree-brackets .jstree-no-dots .jstree-leaf > ins { background:transparent; }
.jstree-brackets .jstree-no-dots .jstree-open > ins { background-position:-18px 0; }
.jstree-brackets .jstree-no-dots .jstree-closed > ins { background-position:0 0; }

.jstree-brackets .jstree-no-icons a .jstree-icon { display:none; }

.jstree-brackets .jstree-search { font-style:italic; }

.jstree-brackets .jstree-no-icons .jstree-checkbox { display:inline-block; }
.jstree-brackets .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox { background-position:-38px -19px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox { background-position:-2px -19px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox { background-position:-20px -19px; }
.jstree-brackets .jstree-checked > a > .jstree-checkbox:hover { background-position:-38px -37px; }
.jstree-brackets .jstree-unchecked > a > .jstree-checkbox:hover { background-position:-2px -37px; }
.jstree-brackets .jstree-undetermined > a > .jstree-checkbox:hover { background-position:-20px -37px; }

#vakata-dragged.jstree-brackets ins { background:transparent !important; }
#vakata-dragged.jstree-brackets .jstree-ok { background:url("images/jsTreeSprites.svg") -2px -53px no-repeat !important; }
#vakata-dragged.jstree-brackets .jstree-invalid { background:url("images/jsTreeSprites.svg") -18px -53px no-repeat !important; }
#jstree-marker.jstree-brackets { background:url("images/jsTreeSprites.svg") -41px -57px no-repeat !important; text-indent:-100px; }

.jstree-brackets a.jstree-search { color:aqua; }
.jstree-brackets .jstree-locked a { color:silver; cursor:default; }

#project-files-container .jstree-brackets .jstree-rename-input {
    background: #000;
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: @bc-shadow-small;
    box-sizing: border-box;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    left: 3px !important;
    top: 2px !important;
    margin: 0;
    padding: 0;
    position: relative;
    width: 150px;
    height: 17px;
    line-height: 17px;
}

#project-files-container .jstree-brackets .jstree-rename-input:focus {
    border: 1px solid @bc-btn-border-focused;
    box-shadow: none;
    outline: none;
}

#vakata-contextmenu.jstree-brackets-context,
#vakata-contextmenu.jstree-brackets-context li ul { background:#f0f0f0; border:1px solid #979797; -moz-box-shadow: 1px 1px 2px #999; -webkit-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; }
#vakata-contextmenu.jstree-brackets-context li { }
#vakata-contextmenu.jstree-brackets-context a { color:black; }
#vakata-contextmenu.jstree-brackets-context a:hover,
#vakata-contextmenu.jstree-brackets-context .vakata-hover > a { padding:0 5px; background:#e8eff7; border:1px solid #aecff7; color:black; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a,
#vakata-contextmenu.jstree-brackets-context li.jstree-contextmenu-disabled a:hover { color:silver; background:transparent; border:0; padding:1px 4px; }
#vakata-contextmenu.jstree-brackets-context li.vakata-separator { background:white; border-top:1px solid #e0e0e0; margin:0; }
#vakata-contextmenu.jstree-brackets-context li ul { margin-left:-4px; }


[VICMS-243] [menu haut] sur un ecran 13pouces, le menu "parent" n'est pas correctement affiché

fatal: unable to access 'https://github.com/MadeWilson/victoire.git/': The requested URL returned error: 403


Add font-awesome spinning file

Add font-awesome spinning file

with font-awesome patterns

// Spinning Icons
// --------------------------

.@{fa-css-prefix}-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

error: pathspec 'cp-strap/src/stylesheets/icons/font-awesome/less/spinning.less' did not match any file(s) known to git


Add blocks style

Add blocks style

fatal: unable to access 'https://github.com/logindave41/sonatra-theme-gluon.git/': The requested URL returned error: 403


Fix fab vertical position in navbar tall with FF

fatal: unable to access 'https://github.com/sonatra/sonatra-theme-gluon.git/': The requested URL returned error: 403


Purple bookmark icons

Purple bookmark icons

/**
* Stream Actions
* ============================================================================
*/

.sticky {
  z-index: 1000;
  .group-header {
    margin-left: 220px;
    margin-right: 20px;
  }

  .stream-actions {
    border-top-color: transparent;
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(52, 60, 69, 0.15);
  }
}

.sticky+.group-list {
  margin-top: 64px;
}

.stream-no-bulk-actions {
  .stream-actions-left, .event-details {
    padding-left: 20px !important;
  }
}

.stream-actions {
  background: rgba(249, 250, 251, 0.6);
  border: 1px solid darken(@trim, 2);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 0 @trim;
  margin: 0;
  padding-right: 10px;

  .btn-group > .btn {
    color: inherit;
  }

  .checkbox {
    position: absolute;
    left: 40px;
    top: 4px;
  }

  .btn-group {
    margin-right: 5px;

    .btn-group {
      margin-right: 0
    }
  }

  .dropdown-toggle {
    box-shadow: none !important;
  }

  .dropdown-menu {
    left: -6px;
    top: 29px;
  }

  .stream-actions-left {
    position: relative;
    padding: 10px 0 10px 44px;

    .checkbox {
      position: absolute;
    }
  }

  .stream-actions-graph {
    font-size: 13px;
    padding-top: 12px;
  }

  .stream-actions-occurrences,
  .stream-actions-users {
    padding-top: 12px;
    font-size: 13px;
  }

  .realtime-paused {
    .btn-danger();
  }

  > .btn {
    color: inherit;
    background: rgba(255,255,255, .85);
    &.dropdown-toggle {
      background: none;
    }
  }

  .toggle-graph {
    .list-unstyled();
    margin-bottom: 0;
    font-size: 11px;
    float: right;

    li {
      float: left;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }

      a {
        color: #454C50;
        padding: 3px 4px 2px;
        border-radius: 3px;
        .transition(background .2s linear);
      }
      &.active a {
        background: lighten(@gray, 15);
        opacity: 1;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}

/**
* Stream / Group List
* ============================================================================
*/

.group-list {
  background: #fff;
  border: 1px solid darken(@trim, 2);
  box-shadow: 0 1px 0 rgba(52, 60, 69, 0.02);
  border-radius: 2px;
  // position: relative;
}

.group-list, .events {
  .list-unstyled;

  .group {
    position: relative;
    margin: 0;
    // position: absolute;
    // left: 15px;
    // width: 100%;
    border-bottom: 1px solid lighten(@trim, 8);
    padding-right: 10px;
    background: #fff;
    .transition(all .4s ease-in-out);

    .icon-bookmark, .icon-soundoff {
      padding-right: 5px;
      font-size: 95%;
      position: relative;
      .transition(all .2s ease-in-out);
      width: auto;
    }

    .icon-bookmark {
      font-size: 14px;
      top: 2px;
      display: none;
      color: @purple;
      overflow: hidden;
    }

    .icon-soundoff {
      display: none;
      font-size: 90%;
      top: 1px;
      color: @red;
      width: auto;
      overflow: hidden;
      padding-left: 1px;
    }

    &.isBookmarked {
      .icon-bookmark {
        display: inline-block;
      }
    }

    &.isMuted {
      .icon-soundoff {
        display: inline-block;
      }
    }

    .event-details:after {
      position: absolute;
      content: "";
      top: -1px;
      right: 0;
      bottom: -1px;
      left: 0;
      width: 4px;
      z-index: 100;
      .transition(all .2s ease-in-out);
    }

    &.selected {
      background: lighten(@blue, 46);
      box-shadow: inset 0 1px 0 rgba(52, 60, 69, 0.08);

      .event-details:after {
        background: @blue
      }
    }

    &.hasSeen {
      h3 {
        a {
          font-weight: 400;
        }
      }
    }

    &.isResolved {
      h3 {
        text-decoration: line-through;
        color: #949ea4;
      }
    }

    &.updated {
      background: #fffff8;
      color: #786E43 !important;
      border-color: #ECEADE;

      a {
        color: darken(#786E43, 5) !important;
      }

      .event-details:after {
        position: absolute;
        content: "";
        top: -1px;
        right: 0;
        bottom: -1px;
        left: 0;
        width: 4px;
        z-index: 100;
        .transition(all .2s ease-in-out);
        background: @yellow;
      }

      .event-message {
        color: #786E43;
      }
    }

    &:first-child {
      .event-cell{
        border-top: 0;
      }
      .event-details:after {
        top: 0;
      }
    }

    &:last-child {
      border-bottom-color: transparent;
      border-radius: 0 0 2px 2px;
      .event-cell {
        border-bottom: 1px solid #E9EBEC;
      }
      .event-details {
        border-radius: 0 0 0 4px;
      }
      .event-users {
        border-radius: 0 0 4px 0;
      }
    }
  }

  .deploy {
    background: lighten(#F8F9FA, 1.25);
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #E9EBEC;
    padding: 5px 0;
  }

  .checkbox {
    position: absolute;
    left: 40px;
    top: 4px;
  }

  .event-details {
    padding: 15px 0 13px 44px;

    h3 {
      font-size: 16px;
      line-height: 1.1;
      letter-spacing: -0.25px;
      margin: 0 0 -1px;
      display: inline-block;
      a {
        color: @grayDark;
      }
    }

    .event-message, .event-extra {
      line-height: 1.2;
      color: lighten(@gray, 12);
    }

    .event-message {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 90%;
    }

    .event-extra {
      margin-top: 7px;

      ul {
        .list-unstyled;
        margin-left: -9px;

        li {
          float: left;
          margin: 0 0 5px 9px;
          font-size: 13px;
          line-height: 1;
          border-right: 1px solid lighten(@trim, 6);
          padding-right: 9px;
          height: 13px;

          &:last-child {
            border: 0;
            padding: 0;
          }

          a {
            display: block;
            color: lighten(@gray, 10);

            &:hover {
              color: @gray;
            }
          }

          .icon {
            margin-right: 4px;
            font-size: 12px;
          }

          .icon-comments {
            font-size: 11px;
          }

          .tag-label {
            margin-right: 4px;
          }
        }
      }
    }

    .event-meta {
      font-size: 80%;
      margin-top: 6px;
      clear: both;
    }

    p {
      line-height: 1.4;
      color: #79858C;
      margin-bottom: 0;
    }

    h3 a, p {
      display: block;
      max-width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .in-release {
      color: #767D81;
      display: inline-block;
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: 600;
      font-size: 80%;
      margin-left: 8px;
      border: 1px solid #E1E8EC;
    }
  }

  .event-assignee {
    color: #B5B9BD;
    padding-top: 28px;

    .dropdown-menu {
      right: 0px;
      top: 32px;
    }
  }

  .event-graph {
    padding-top: 32px;
  }

  .event-users, .event-occurrences {
    padding-top: 33px;
    span {
      .stream-count;
      .transition(all linear .3s);

      &.ng-update {
        background: rgba(255, 252, 82, 0.75);
        opacity: 1;
        border-radius: 4px;
        color: #111;
      }
    }
  }

  &.group-list-small {
    margin: -1px;

    .row {
      padding: 0 10px;
    }

    .event-details {
      padding-left: 20px;
      &:after {
        left: -1px;
      }
    }

    .group:last-child {
      border: 0;
    }
  }

  &.similar-events {
    //TODO:Chris style similar events
  }

  .severity {
    padding-top: 35px;
  }
}

.group-list-empty {
  padding: 40px;
  text-align: center;
}

// Generate .group positions for animating

/*
.generate-groups(50);

.generate-groups(@n, @i: 1, ) when (@i =< @n) {
  .group:nth-child(@{i}) {
    @offset: (@i * 100% - 100);
    transform: translate3d(0, @offset, 0);
    -moz-transform: translate3d(0, @offset, 0);
    -ms-transform: translate3d(0, @offset, 0);
  }
  .generate-groups(@n, (@i + 1));
}
*/

.stream-count {
  font-size: 20px;
}

/**
* Stream Filters
* ============================================================================
*/

.primary-filters {
  padding-right: 0;
}

.filter-nav {
  margin-top: -3px;

  .nav-tabs {
    margin: 0;

    > li {
      > a {
        padding-bottom: 26px;
        margin: 0;

        .icon-arrow-down {
          margin-left: 2px;
          position: relative;
          top: 2px;
          color: lighten(@gray, 25);
        }
      }

      &.highlight {
        a {
          font-weight: 600;
          color: @grayDark;
          font-size: 95%;
        }
      }

      &.divider {
        height: 22px;
        border-left: 1px solid lighten(@trim, 4);
        margin-right: 20px;
        margin-left: 1px;
      }
    }
  }

  .text-tabs {
    margin-bottom: 25px;
  }
}

/**
* Stream Pagination
* ============================================================================
*/

.stream-pagination {
  margin: 20px 0;

  .icon-arrow-right, .icon-arrow-left {
    font-size: 20px !important;
  }
}

/**
* Empty Stream
* ============================================================================
*/

.empty-stream {
  border: 1px solid @trim;
  border-radius: 0 0 2px 2px;
  text-align: center;
  font-size: 22px;
  padding: 48px 0 48px;

  p {
    line-height: 1.2;
    margin: 0 auto 10px;
  }

  .icon {
    display: block;
    font-size: 54px;
    color: lighten(@gray, 20);
    opacity: .45;
    margin-bottom: 20px;
  }
}

/**
* Responsive small screen
* ============================================================================
*/

@media(max-width:767px) {
  .primary-filters {
    padding-right: 15px;
    margin-bottom: -1px;
  }

  .stream-actions {
    .stream-actions-occurrences, .stream-actions-users {
      font-size: 13px;
      padding-top: 12px;
    }
  }
}

/**
* Stream Actions
* ============================================================================
*/

.sticky {
  z-index: 1000;
  .group-header {
    margin-left: 220px;
    margin-right: 20px;
  }

  .stream-actions {
    border-top-color: transparent;
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(52, 60, 69, 0.15);
  }
}

.sticky+.group-list {
  margin-top: 64px;
}

.stream-no-bulk-actions {
  .stream-actions-left, .event-details {
    padding-left: 20px !important;
  }
}

.stream-actions {
  background: rgba(249, 250, 251, 0.6);
  border: 1px solid darken(@trim, 2);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 0 @trim;
  margin: 0;
  padding-right: 10px;

  .btn-group > .btn {
    color: inherit;
  }

  .checkbox {
    position: absolute;
    left: 40px;
    top: 4px;
  }

  .btn-group {
    margin-right: 5px;

    .btn-group {
      margin-right: 0
    }
  }

  .dropdown-toggle {
    box-shadow: none !important;
  }

  .dropdown-menu {
    left: -6px;
    top: 29px;
  }

  .stream-actions-left {
    position: relative;
    padding: 10px 0 10px 44px;

    .checkbox {
      position: absolute;
    }
  }

  .stream-actions-graph {
    font-size: 13px;
    padding-top: 12px;
  }

  .stream-actions-occurrences,
  .stream-actions-users {
    padding-top: 12px;
    font-size: 13px;
  }

  .realtime-paused {
    .btn-danger();
  }

  > .btn {
    color: inherit;
    background: rgba(255,255,255, .85);
    &.dropdown-toggle {
      background: none;
    }
  }

  .toggle-graph {
    .list-unstyled();
    margin-bottom: 0;
    font-size: 11px;
    float: right;

    li {
      float: left;
      margin-right: 10px;

      &:last-child {
        margin-right: 0;
      }

      a {
        color: #454C50;
        padding: 3px 4px 2px;
        border-radius: 3px;
        .transition(background .2s linear);
      }
      &.active a {
        background: lighten(@gray, 15);
        opacity: 1;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}

/**
* Stream / Group List
* ============================================================================
*/

.group-list {
  background: #fff;
  border: 1px solid darken(@trim, 2);
  box-shadow: 0 1px 0 rgba(52, 60, 69, 0.02);
  border-radius: 2px;
  // position: relative;
}

.group-list, .events {
  .list-unstyled;

  .group {
    position: relative;
    margin: 0;
    // position: absolute;
    // left: 15px;
    // width: 100%;
    border-bottom: 1px solid lighten(@trim, 8);
    padding-right: 10px;
    background: #fff;
    .transition(all .4s ease-in-out);

    .icon-bookmark, .icon-soundoff {
      padding-right: 5px;
      font-size: 95%;
      position: relative;
      .transition(all .2s ease-in-out);
      width: auto;
    }

    .icon-bookmark {
      font-size: 14px;
      top: 2px;
      display: none;
      color: lighten(@gray, 15%);
      overflow: hidden;
    }

    .icon-soundoff {
      display: none;
      font-size: 90%;
      top: 1px;
      color: @red;
      width: auto;
      overflow: hidden;
      padding-left: 1px;
    }

    &.isBookmarked {
      .icon-bookmark {
        display: inline-block;
      }
    }

    &.isMuted {
      .icon-soundoff {
        display: inline-block;
      }
    }

    .event-details:after {
      position: absolute;
      content: "";
      top: -1px;
      right: 0;
      bottom: -1px;
      left: 0;
      width: 4px;
      z-index: 100;
      .transition(all .2s ease-in-out);
    }

    &.selected {
      background: lighten(@blue, 46);
      box-shadow: inset 0 1px 0 rgba(52, 60, 69, 0.08);

      .event-details:after {
        background: @blue
      }
    }

    &.hasSeen {
      h3 {
        a {
          font-weight: 400;
        }
      }
    }

    &.isResolved {
      h3 {
        text-decoration: line-through;
        color: #949ea4;
      }
    }

    &.updated {
      background: #fffff8;
      color: #786E43 !important;
      border-color: #ECEADE;

      a {
        color: darken(#786E43, 5) !important;
      }

      .event-details:after {
        position: absolute;
        content: "";
        top: -1px;
        right: 0;
        bottom: -1px;
        left: 0;
        width: 4px;
        z-index: 100;
        .transition(all .2s ease-in-out);
        background: @yellow;
      }

      .event-message {
        color: #786E43;
      }
    }

    &:first-child {
      .event-cell{
        border-top: 0;
      }
      .event-details:after {
        top: 0;
      }
    }

    &:last-child {
      border-bottom-color: transparent;
      border-radius: 0 0 2px 2px;
      .event-cell {
        border-bottom: 1px solid #E9EBEC;
      }
      .event-details {
        border-radius: 0 0 0 4px;
      }
      .event-users {
        border-radius: 0 0 4px 0;
      }
    }
  }

  .deploy {
    background: lighten(#F8F9FA, 1.25);
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #E9EBEC;
    padding: 5px 0;
  }

  .checkbox {
    position: absolute;
    left: 40px;
    top: 4px;
  }

  .event-details {
    padding: 15px 0 13px 44px;

    h3 {
      font-size: 16px;
      line-height: 1.1;
      letter-spacing: -0.25px;
      margin: 0 0 -1px;
      display: inline-block;
      a {
        color: @grayDark;
      }
    }

    .event-message, .event-extra {
      line-height: 1.2;
      color: lighten(@gray, 12);
    }

    .event-message {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 90%;
    }

    .event-extra {
      margin-top: 7px;

      ul {
        .list-unstyled;
        margin-left: -9px;

        li {
          float: left;
          margin: 0 0 5px 9px;
          font-size: 13px;
          line-height: 1;
          border-right: 1px solid lighten(@trim, 6);
          padding-right: 9px;
          height: 13px;

          &:last-child {
            border: 0;
            padding: 0;
          }

          a {
            display: block;
            color: lighten(@gray, 10);

            &:hover {
              color: @gray;
            }
          }

          .icon {
            margin-right: 4px;
            font-size: 12px;
          }

          .icon-comments {
            font-size: 11px;
          }

          .tag-label {
            margin-right: 4px;
          }
        }
      }
    }

    .event-meta {
      font-size: 80%;
      margin-top: 6px;
      clear: both;
    }

    p {
      line-height: 1.4;
      color: #79858C;
      margin-bottom: 0;
    }

    h3 a, p {
      display: block;
      max-width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .in-release {
      color: #767D81;
      display: inline-block;
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: 600;
      font-size: 80%;
      margin-left: 8px;
      border: 1px solid #E1E8EC;
    }
  }

  .event-assignee {
    color: #B5B9BD;
    padding-top: 28px;

    .dropdown-menu {
      right: 0px;
      top: 32px;
    }
  }

  .event-graph {
    padding-top: 32px;
  }

  .event-users, .event-occurrences {
    padding-top: 33px;
    span {
      .stream-count;
      .transition(all linear .3s);

      &.ng-update {
        background: rgba(255, 252, 82, 0.75);
        opacity: 1;
        border-radius: 4px;
        color: #111;
      }
    }
  }

  &.group-list-small {
    margin: -1px;

    .row {
      padding: 0 10px;
    }

    .event-details {
      padding-left: 20px;
      &:after {
        left: -1px;
      }
    }

    .group:last-child {
      border: 0;
    }
  }

  &.similar-events {
    //TODO:Chris style similar events
  }

  .severity {
    padding-top: 35px;
  }
}

.group-list-empty {
  padding: 40px;
  text-align: center;
}

// Generate .group positions for animating

/*
.generate-groups(50);

.generate-groups(@n, @i: 1, ) when (@i =< @n) {
  .group:nth-child(@{i}) {
    @offset: (@i * 100% - 100);
    transform: translate3d(0, @offset, 0);
    -moz-transform: translate3d(0, @offset, 0);
    -ms-transform: translate3d(0, @offset, 0);
  }
  .generate-groups(@n, (@i + 1));
}
*/

.stream-count {
  font-size: 20px;
}

/**
* Stream Filters
* ============================================================================
*/

.primary-filters {
  padding-right: 0;
}

.filter-nav {
  margin-top: -3px;

  .nav-tabs {
    margin: 0;

    > li {
      > a {
        padding-bottom: 26px;
        margin: 0;

        .icon-arrow-down {
          margin-left: 2px;
          position: relative;
          top: 2px;
          color: lighten(@gray, 25);
        }
      }

      &.highlight {
        a {
          font-weight: 600;
          color: @grayDark;
          font-size: 95%;
        }
      }

      &.divider {
        height: 22px;
        border-left: 1px solid lighten(@trim, 4);
        margin-right: 20px;
        margin-left: 1px;
      }
    }
  }

  .text-tabs {
    margin-bottom: 25px;
  }
}

/**
* Stream Pagination
* ============================================================================
*/

.stream-pagination {
  margin: 20px 0;

  .icon-arrow-right, .icon-arrow-left {
    font-size: 20px !important;
  }
}

/**
* Empty Stream
* ============================================================================
*/

.empty-stream {
  border: 1px solid @trim;
  border-radius: 0 0 2px 2px;
  text-align: center;
  font-size: 22px;
  padding: 48px 0 48px;

  p {
    line-height: 1.2;
    margin: 0 auto 10px;
  }

  .icon {
    display: block;
    font-size: 54px;
    color: lighten(@gray, 20);
    opacity: .45;
    margin-bottom: 20px;
  }
}

/**
* Responsive small screen
* ============================================================================
*/

@media(max-width:767px) {
  .primary-filters {
    padding-right: 15px;
    margin-bottom: -1px;
  }

  .stream-actions {
    .stream-actions-occurrences, .stream-actions-users {
      font-size: 13px;
      padding-top: 12px;
    }
  }
}


UPDATE: module_v4skin | kajona-overrides.less > rever menu width

fatal: unable to access 'https://github.com/kajona/kajonacms.git/': The requested URL returned error: 403


Reduce key column width

Reduce key column width

fatal: unable to access 'https://github.com/JamesMura/sentry.git/': The requested URL returned error: 403