nav buttons design

nav buttons design

* add shadow to buttons, similar to float buttons
* ensure next and prev buttons are correctly aligned with float buttons on tablet and desktop

@import: 'variables.less';

.create-edit-document {
  margin-top: @page-header-height;

  @media @tablet {
    margin-top: -20px;
  }
  @media @phone {
    margin-top: 50px;
  }
  .document-editing {
    width: 80%;
    margin: auto;
    @media @tablet {
      width: 85%;
    }
    @media @phone {
      width: 92%;
      margin-left: 2px;
    }
  }
  #save-confirmation-modal {
    display: none;
  }
  .nav-buttons {
    @media @phone {
      display: none;
    }
    button {
      box-shadow: 0 0 3px gray;

      &:hover {
        box-shadow: 0 0 8px lightslategray;
        transition: 0.2s ease-in-out;
      }
    }
    .prev, .next {
      position: fixed;
      top: 50vh;
      z-index: 4;
      height: 45px;
      width: 45px;
      border-radius: 50%;
      .glyphicon {
        color: white;
      }
      @media @tablet {
        padding: 3px 7px;
      }
    }
    .prev {
      left: @menu-width + 15;
      @media @tablet {
        left: @menu-width-tablet + 10;
      }
    }
    .next {
      right: 15px;
    }
  }
  .editing {
    position: relative;
    width: 600%;
    @media @phone {
      position: static;
      margin-bottom: 100px;
    }
  }
  .form-group {
    padding: 0;
  }
  h1 {
    margin-top: 70px;
    font-size: 2em;

    label {
      background: slategray;
      padding: 3px 6px 3px 6px;
    }
    @media @tablet {
      font-size: 2.0em;
      margin-top: 55px;
    }
    @media @phone {
      font-size: 1.8em;
      padding-top: 10px;
      margin-top: 0;
    }
  }

  #maps_info-group {
    width: 100%;
    margin-top: 15px;

    input:not(last-of-type) {
      margin-bottom: 10px;
    }
    .map-info {
      float: none;
      @media (max-width: @screen-md-max) {
        width: 100%;
      }
    }
    #document-add-maps {
      margin-left: 20px;
      font-size: 1.4em;
      border-radius: 50%;
      height: 40px;
      width: 40px;
      background:  @C2C-orange;
      .glyphicon {
        color:white;
      }
    }
  }

  .section {
    .flex();
    flex-flow: wrap row;
    justify-content: space-between;
    border: 2px solid #eee;
    border-radius: 5px;
    background: white;
    margin-bottom: 15px;
    width: 100%;

    #image {
      width: 100%;
      .image {
        height: 300px;
        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;
      }
    }

    app-simple-search {
      width: 100px;
      @media @phone {
        width: 100%;
        .search {
          width: 100%;
        }
      }
    }
    .conditions-levels {
      margin-bottom: 10px;
      th {
        font-size: 0.9em;
        line-height: 13px;
        text-align: center;
      }
      .glyphicon-trash {
        position: relative;
        margin-top: 6px;
        font-size: 1.4em;
      }
    }

    .third, .half, .full, #rock_types-group, #title-group, #lang-group, .date {
      float: left;
      margin-right: 2%;
      margin-left: 2%;

      @media @phone {
        margin-right: 0;
        flex-basis: 100% !important;
      }
    }
    .date {
      width: 45%;
      flex-basis: 45%;
    }
    .third {
      width: 29.3%;
      flex-basis: 29.3%;
    }
    .half {
      width: 46%;
      flex-basis: 46%;

      @media @big {
        flex-basis: 29.3%;
        width: 29.3%;
      }
      &.half-group {
        @media @big {
          width: 45% !important;
          flex-basis: 45% !important;
        }
      }

      &.remain {
        flex-basis: 46% !important;
        @media @phone {
          flex-basis: 48% !important;
        }
      }
      .glyphicon-warning-sign, .glyphicon-ok {
        left: 102%;
      }
    }
    .full {
      flex-basis: 100%;
      margin-right: 1.5%;
      margin-bottom: 10px;
    }
    textarea.description {
      height: 300px !important;
    }
    .route-activities {
     @media @phone {
        justify-content: space-between;
      }
      .activity {
        width: 20%;
        text-align: center;
        @media (max-width: @screen-md-min) {
          width: 33%;
        }
        p {
          text-align: center;
        }
      }
     [class^="icon-"] {
        font-size: 8em;

        @media (max-width: @screen-sm-min) {
          font-size: 6em;
        }
        @media (max-width: @screen-sm-max) {
          font-size: 7em;
        }
        @media @phone {
          font-size: 5em;
        }
      }
    }
    .content {
      padding: 10px 20px 10px 20px;
      width: 100%;
      .flex();
      flex-flow: wrap row;
      justify-content: space-between;

      &.waypoint-association {
        min-height:  300px;
        app-simple-search {
          height: 37px;
        }
      }
      &.outing-route {
        .tt-menu {
          max-height: 400px;
          overflow-y: scroll;
        }
      }
      &.route-associations {
        width: 100%;
        padding: 2%;
      }
      .associated-documents {
        padding: 0 10px 10px 10px;
        border: 2px solid #eee;
        border-radius: 5px;
      }
    }
    .heading {
      margin: 0;
      background-color: @bright-green;
      font-size: 1.5em;
      >span {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    &.numbers, &.ratings, &.maps-info, &.transports {
      .content {
        justify-content: flex-start;
      }
    }
    &.summary {
      .content {
        @media @phone {
          padding: 15px;
        }
        figure {
          flex: 1;
          min-width: 32%;
          margin: .5%;
          background-color: rgba(243, 243, 243, 0.57);
          padding: 10px;
          border: 1px solid #eee;
          border-radius: 5px;

          @media @tablet {
            flex-basis: 49%;
          }
          @media @phone {
            flex-basis: 100%;
          }
          h3 {
            font-variant: small-caps;
            text-align: center;
            color: #FFB862;
            margin-bottom: 10px;
            border-radius: 7px;
            background-color: white;
          }
          article {
            margin-bottom: 10px;
          }
        }
      }
      .summary-description, .summary-numbers, .summary-gear {
        min-width: 99% !important;
      }
    }
  }
  .input-group {
    z-index: 0 !important;
  }
  .form-control-feedback {
    position: relative;
    top: -34px;
    left: -moz-calc(~"100% + 5px");
    left: -webkit-calc(~"100% + 5px");
    left: -o-calc(~"100% + 5px");
    left: calc(~"100% + 5px");
    width: 14px;
    height: 0;
    z-index: 0 !important;
    pointer-events: all;

    @media @phone {
      display: none;
    }
  }

  .map-edit {
    margin-top: 5px;
    margin-bottom: 10px;
    flex-basis: 100%;
    @media @phone {
      margin-top: 8px;
    }
    .map{
      height: 400px;
    }
  }

  .progress-bar-edit {
    position: relative;
    .flex();
    justify-content: space-around;
    width: 102%;
    margin: 40px 20px 20px 0;
    height: 4px;
    background-image: -moz-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20@gray 0%);  /*green to gray*/
    background-image: -o-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20%,@gray 0%);  /*green to gray*/
    background-image: -ms-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20%,@gray 0%);  /*green to gray*/
    background-image: linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 0%,@gray 20%);  /*green to gray*/
    background-image: -webkit-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20%,@gray 0%);  /*green to gray*/
    background-size: 100%;

    @media @phone {
      display: none;
    }

    @media @tablet {
      width: 106%;
      margin-left: -10px;
      margin-top: 35px;
    }

    .edit-progress {
      position: absolute;
      left: -10px;
      width: 103%;
    }

    &::before, &::after {
      content: "";
      position: absolute;
      top: -8px;
      display: block;
      width: 0;
      height: 0;
      border-radius: 10px;
      border: 10px solid @bright-green;
    }
    &::before {
      left: -5px;
    }
    &::after {
      right: -10px;
      border: 10px solid transparent;
      border-right: 0;
      border-left: 20px solid @bright-green;
      border-radius: 3px;
    }

    li {
      transition: 0.3s ease-in-out;
      position: relative;
      top: -24px;
      display: inline-block;
      font: bold 14px arial;
      color: graytext;
      &:hover {
        cursor: pointer;
        color: #28e;
      }
      .nav-text {
        font-variant: small-caps;
        @media @big {
          font-size: 1.2em;
        }
        @media @desktop {
          font-size: 1.1em;
        }
      }
    }
  }
}

.section {
  .associations {
    border: none;
  }
  &:last-child:not(.associations):not(.preferences-act-areas) {
    margin-bottom: 20%;
    @media @phone {
      margin-bottom: 0;
    }
  }

  ul {
    padding: 0;
    list-style: none;
  }
  .months, .types {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    list-style: none;
    margin-bottom: 10px;

    @media @phone {
      column-count: 1;
      -webkit-column-count: 1;
      -moz-column-count: 1;
    }
    &.long {
      column-count: 2 !important;
      -webkit-column-count: 2 !important;
      -moz-column-count: 2 !important;
    }

    li {
      cursor: pointer;
    }

    .checkbox {
      margin: 0;
    }
  }
  article ul{
    padding-left: 20px;
    li:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -10px;
      margin-right: 5px;
      color: @brand-success;
    }
  }
  label, .months, .types, #route-activities, h2 {
    width: 100%;
  }
}

.action-buttons {
  margin-top: 100px;
  button {
    padding: 0;
  }
  .glyphicon-ok {
    color: white !important;
  }
}
#title-edit {
  justify-content: flex-start;
}
#title-group {
  flex-basis: 74%;
  margin-right: 3% !important;
  margin-bottom: 10px;
}
#lang-group {
  margin: 0 !important;
  flex-basis: 20%;
  @media @phone {
    margin: 0 .5% 15px 2% !important;
  }
}
#waypoint_type-group {
  height: 70px;
}
#access-period {
  ul {
    flex-basis: 46%;
  }
  article {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap row;
  }
}
.step {
  will-change: right, left;
  position: relative;
  float: left;
  margin-right: 2%;
  width: 17%;

  @media @big {
    margin-right: 2.6%;
    margin-left: .5%;
    width: 16%;
  }

  @media @phone {
    float: none;
    width: 18%;
  }
}

.bullet-container {
  position: absolute;
  width: 100%;
  left: 0;
  display: flex;
  justify-content: space-around;
  top: 22px;
  .bullet {
    border: 4px solid #9b2;
    border-radius: 10px;
    background: #eee;
  }
}

input[type="radio"] {
  margin-right: 10px;
}

#orientation-list, #activity-list {
  display: none;
  @media @phone {
    display: block;
  }
}

#orientation-svg {
  width: 100%;
  @media @tablet {
    width: 90%;
  }

  #circle-N, #circle-S, #circle-W, #circle-E,
  #circle-SE, #circle-NE, #circle-SW, #circle-NW, #text-N, #text-E, #text-W,
  #text-S, #text-SE, #text-SW, #text-NW, #text-NE{
    cursor: pointer;
    transition: 0.3s ease-in-out;
  }
}

.circle-selected {
  transition: 0.3s ease-in-out;
  fill: @bright-green;
}

.half-circle-selected {
  transition: 0.3s ease-in-out;
  stroke: #2F8D20 !important;
}

.orientation-text-selected {
  font-weight: bold !important;
  transition: 0.3s ease-in-out;
  text-decoration: underline;
}

.nav-step-selected {
  .nav-text {
    color: black;
    transition: 0.3s ease-in-out;
  }
  .bullet {
    border-color: @C2C-orange;
    transition: 0.3s ease-in-out;
  }
}

.activity-selected {
  color: @C2C-orange !important;
  transition: 0.2s ease-in-out;
}

#participants-group app-simple-search{
  margin-bottom: 0;
}

ul.uib-datepicker {
  padding: 10px;
}

#preview-container {
  height: 100%;

  #preview-container-content {
    height: 95%;
    overflow: auto;

    .view-details-title {
      margin-top: 10px;
    }

    .view-details-section {
      margin-top: 10px;
      height: 100%;
    }
  }

  button {
    float: right;
    margin-top: 10px;
    margin-left: 5px;
  }
}

#save-confirmation-modal {
   .comment {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .heading {
    margin-top: 0
  }
  .content {
    padding: 20px;
  }
}

@import: 'variables.less';

.create-edit-document {
  margin-top: @page-header-height;

  @media @tablet {
    margin-top: -20px;
  }
  @media @phone {
    margin-top: 50px;
  }
  .document-editing {
    width: 80%;
    margin: auto;
    @media @tablet {
      width: 85%;
    }
    @media @phone {
      width: 92%;
      margin-left: 2px;
    }
  }
  #save-confirmation-modal {
    display: none;
  }
  .nav-buttons {
    @media @phone {
      display: none;
    }
    .prev, .next {
      position: fixed;
      top: 50vh;
      z-index: 4;
      height: 45px;
      width: 45px;
      border-radius: 50%;
      .glyphicon {
        color: white;
      }
      @media @tablet {
        padding: 3px 7px;
      }
    }
    .prev {
      left: @menu-width + 20;
      @media @tablet {
        left: @menu-width-tablet + 10;
      }
    }
    .next {
      right: 20px;
      @media @tablet {
        right: 15px;
      }
    }
  }
  .editing {
    position: relative;
    width: 600%;
    @media @phone {
      position: static;
      margin-bottom: 100px;
    }
  }
  .form-group {
    padding: 0;
  }
  h1 {
    margin-top: 70px;
    font-size: 2em;

    label {
      background: slategray;
      padding: 3px 6px 3px 6px;
    }
    @media @tablet {
      font-size: 2.0em;
      margin-top: 55px;
    }
    @media @phone {
      font-size: 1.8em;
      padding-top: 10px;
      margin-top: 0;
    }
  }

  #maps_info-group {
    width: 100%;
    margin-top: 15px;

    input:not(last-of-type) {
      margin-bottom: 10px;
    }
    .map-info {
      float: none;
      @media (max-width: @screen-md-max) {
        width: 100%;
      }
    }
    #document-add-maps {
      margin-left: 20px;
      font-size: 1.4em;
      border-radius: 50%;
      height: 40px;
      width: 40px;
      background:  @C2C-orange;
      .glyphicon {
        color:white;
      }
    }
  }

  .section {
    .flex();
    flex-flow: wrap row;
    justify-content: space-between;
    border: 2px solid #eee;
    border-radius: 5px;
    background: white;
    margin-bottom: 15px;
    width: 100%;

    #image {
      width: 100%;
      .image {
        height: 300px;
        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;
      }
    }

    app-simple-search {
      width: 100px;
      @media @phone {
        width: 100%;
        .search {
          width: 100%;
        }
      }
    }
    .conditions-levels {
      margin-bottom: 10px;
      th {
        font-size: 0.9em;
        line-height: 13px;
        text-align: center;
      }
      .glyphicon-trash {
        position: relative;
        margin-top: 6px;
        font-size: 1.4em;
      }
    }

    .third, .half, .full, #rock_types-group, #title-group, #lang-group, .date {
      float: left;
      margin-right: 2%;
      margin-left: 2%;

      @media @phone {
        margin-right: 0;
        flex-basis: 100% !important;
      }
    }
    .date {
      width: 45%;
      flex-basis: 45%;
    }
    .third {
      width: 29.3%;
      flex-basis: 29.3%;
    }
    .half {
      width: 46%;
      flex-basis: 46%;

      @media @big {
        flex-basis: 29.3%;
        width: 29.3%;
      }
      &.half-group {
        @media @big {
          width: 45% !important;
          flex-basis: 45% !important;
        }
      }

      &.remain {
        flex-basis: 46% !important;
        @media @phone {
          flex-basis: 48% !important;
        }
      }
      .glyphicon-warning-sign, .glyphicon-ok {
        left: 102%;
      }
    }
    .full {
      flex-basis: 100%;
      margin-right: 1.5%;
      margin-bottom: 10px;
    }
    textarea.description {
      height: 300px !important;
    }
    .route-activities {
     @media @phone {
        justify-content: space-between;
      }
      .activity {
        width: 20%;
        text-align: center;
        @media (max-width: @screen-md-min) {
          width: 33%;
        }
        p {
          text-align: center;
        }
      }
     [class^="icon-"] {
        font-size: 8em;

        @media (max-width: @screen-sm-min) {
          font-size: 6em;
        }
        @media (max-width: @screen-sm-max) {
          font-size: 7em;
        }
        @media @phone {
          font-size: 5em;
        }
      }
    }
    .content {
      padding: 10px 20px 10px 20px;
      width: 100%;
      .flex();
      flex-flow: wrap row;
      justify-content: space-between;

      &.waypoint-association {
        min-height:  300px;
        app-simple-search {
          height: 37px;
        }
      }
      &.outing-route {
        .tt-menu {
          max-height: 400px;
          overflow-y: scroll;
        }
      }
      &.route-associations {
        width: 100%;
        padding: 2%;
      }
      .associated-documents {
        padding: 0 10px 10px 10px;
        border: 2px solid #eee;
        border-radius: 5px;
      }
    }
    .heading {
      margin: 0;
      background-color: @bright-green;
      font-size: 1.5em;
      >span {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    &.numbers, &.ratings, &.maps-info, &.transports {
      .content {
        justify-content: flex-start;
      }
    }
    &.summary {
      .content {
        @media @phone {
          padding: 15px;
        }
        figure {
          flex: 1;
          min-width: 32%;
          margin: .5%;
          background-color: rgba(243, 243, 243, 0.57);
          padding: 10px;
          border: 1px solid #eee;
          border-radius: 5px;

          @media @tablet {
            flex-basis: 49%;
          }
          @media @phone {
            flex-basis: 100%;
          }
          h3 {
            font-variant: small-caps;
            text-align: center;
            color: #FFB862;
            margin-bottom: 10px;
            border-radius: 7px;
            background-color: white;
          }
          article {
            margin-bottom: 10px;
          }
        }
      }
      .summary-description, .summary-numbers, .summary-gear {
        min-width: 99% !important;
      }
    }
  }
  .input-group {
    z-index: 0 !important;
  }
  .form-control-feedback {
    position: relative;
    top: -34px;
    left: -moz-calc(~"100% + 5px");
    left: -webkit-calc(~"100% + 5px");
    left: -o-calc(~"100% + 5px");
    left: calc(~"100% + 5px");
    width: 14px;
    height: 0;
    z-index: 0 !important;
    pointer-events: all;

    @media @phone {
      display: none;
    }
  }

  .map-edit {
    margin-top: 5px;
    margin-bottom: 10px;
    flex-basis: 100%;
    @media @phone {
      margin-top: 8px;
    }
    .map{
      height: 400px;
    }
  }

  .progress-bar-edit {
    position: relative;
    .flex();
    justify-content: space-around;
    width: 102%;
    margin: 40px 20px 20px 0;
    height: 4px;
    background-image: -moz-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20@gray 0%);  /*green to gray*/
    background-image: -o-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20%,@gray 0%);  /*green to gray*/
    background-image: -ms-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20%,@gray 0%);  /*green to gray*/
    background-image: linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 0%,@gray 20%);  /*green to gray*/
    background-image: -webkit-linear-gradient(left, @bright-green 0,@bright-green  15%,@gray 20%,@gray 0%);  /*green to gray*/
    background-size: 100%;

    @media @phone {
      display: none;
    }

    @media @tablet {
      width: 106%;
      margin-left: -10px;
      margin-top: 35px;
    }

    .edit-progress {
      position: absolute;
      left: -10px;
      width: 103%;
    }

    &::before, &::after {
      content: "";
      position: absolute;
      top: -8px;
      display: block;
      width: 0;
      height: 0;
      border-radius: 10px;
      border: 10px solid @bright-green;
    }
    &::before {
      left: -5px;
    }
    &::after {
      right: -10px;
      border: 10px solid transparent;
      border-right: 0;
      border-left: 20px solid @bright-green;
      border-radius: 3px;
    }

    li {
      transition: 0.3s ease-in-out;
      position: relative;
      top: -24px;
      display: inline-block;
      font: bold 14px arial;
      color: graytext;
      &:hover {
        cursor: pointer;
        color: #28e;
      }
      .nav-text {
        font-variant: small-caps;
        @media @big {
          font-size: 1.2em;
        }
        @media @desktop {
          font-size: 1.1em;
        }
      }
    }
  }
}

.section {
  .associations {
    border: none;
  }
  &:last-child:not(.associations):not(.preferences-act-areas) {
    margin-bottom: 20%;
    @media @phone {
      margin-bottom: 0;
    }
  }

  ul {
    padding: 0;
    list-style: none;
  }
  .months, .types {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    list-style: none;
    margin-bottom: 10px;

    @media @phone {
      column-count: 1;
      -webkit-column-count: 1;
      -moz-column-count: 1;
    }
    &.long {
      column-count: 2 !important;
      -webkit-column-count: 2 !important;
      -moz-column-count: 2 !important;
    }

    li {
      cursor: pointer;
    }

    .checkbox {
      margin: 0;
    }
  }
  article ul{
    padding-left: 20px;
    li:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -10px;
      margin-right: 5px;
      color: @brand-success;
    }
  }
  label, .months, .types, #route-activities, h2 {
    width: 100%;
  }
}

.action-buttons {
  margin-top: 100px;
  button {
    padding: 0;
  }
  .glyphicon-ok {
    color: white !important;
  }
}
#title-edit {
  justify-content: flex-start;
}
#title-group {
  flex-basis: 74%;
  margin-right: 3% !important;
  margin-bottom: 10px;
}
#lang-group {
  margin: 0 !important;
  flex-basis: 20%;
  @media @phone {
    margin: 0 .5% 15px 2% !important;
  }
}
#waypoint_type-group {
  height: 70px;
}
#access-period {
  ul {
    flex-basis: 46%;
  }
  article {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap row;
  }
}
.step {
  will-change: right, left;
  position: relative;
  float: left;
  margin-right: 2%;
  width: 17%;

  @media @big {
    margin-right: 2.6%;
    margin-left: .5%;
    width: 16%;
  }

  @media @phone {
    float: none;
    width: 18%;
  }
}

.bullet-container {
  position: absolute;
  width: 100%;
  left: 0;
  display: flex;
  justify-content: space-around;
  top: 22px;
  .bullet {
    border: 4px solid #9b2;
    border-radius: 10px;
    background: #eee;
  }
}

input[type="radio"] {
  margin-right: 10px;
}

#orientation-list, #activity-list {
  display: none;
  @media @phone {
    display: block;
  }
}

#orientation-svg {
  width: 100%;
  @media @tablet {
    width: 90%;
  }

  #circle-N, #circle-S, #circle-W, #circle-E,
  #circle-SE, #circle-NE, #circle-SW, #circle-NW, #text-N, #text-E, #text-W,
  #text-S, #text-SE, #text-SW, #text-NW, #text-NE{
    cursor: pointer;
    transition: 0.3s ease-in-out;
  }
}

.circle-selected {
  transition: 0.3s ease-in-out;
  fill: @bright-green;
}

.half-circle-selected {
  transition: 0.3s ease-in-out;
  stroke: #2F8D20 !important;
}

.orientation-text-selected {
  font-weight: bold !important;
  transition: 0.3s ease-in-out;
  text-decoration: underline;
}

.nav-step-selected {
  .nav-text {
    color: black;
    transition: 0.3s ease-in-out;
  }
  .bullet {
    border-color: @C2C-orange;
    transition: 0.3s ease-in-out;
  }
}

.activity-selected {
  color: @C2C-orange !important;
  transition: 0.2s ease-in-out;
}

#participants-group app-simple-search{
  margin-bottom: 0;
}

ul.uib-datepicker {
  padding: 10px;
}

#preview-container {
  height: 100%;

  #preview-container-content {
    height: 95%;
    overflow: auto;

    .view-details-title {
      margin-top: 10px;
    }

    .view-details-section {
      margin-top: 10px;
      height: 100%;
    }
  }

  button {
    float: right;
    margin-top: 10px;
    margin-left: 5px;
  }
}

#save-confirmation-modal {
   .comment {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .heading {
    margin-top: 0
  }
  .content {
    padding: 20px;
  }
}


major updates to layouts and added cl options

/* onedark notebook colors */
@notebook-bg:           #16191d;
@notebook-fg:           #a6adba;
@notebook-base:         #303841;

@selected-bg:           #48a667;
@selected-half:         rgba(70, 82, 95, .55);
@selected-third:        rgba(70, 82, 95, .30);
@selected-tenth:        rgba(70, 82, 95, .15);
@selected-error:        rgba(192, 57, 67, .3);
@prompt-line:           rgba(83, 180, 115,.5);
@tc-prompt:             rgba(53, 114, 198,.5);
@matching-bracket:      #4780ce;
@selected-active:       @selected-bg;
@divider:               rgba(83, 180, 115, .3);

@selected-fg:           #d1d5db;
@selected-fg-bright:    #eeeff1;

@cc-input-bg:           #282c34;
@cc-input-fg:           #B5C2D9;
@cc-output-bg:          @notebook-base;
@cc-output-fg:          @cc-input-fg;
@text-cell-fg:          @cc-input-fg;
@unrendered-text:       @matching-bracket;
@header-fg:             @unrendered-text;

@tooltip-bg-color:      @notebook-base;
@tooltip-fg-color:      #CFD2D9;

@item-theme:            @selected-bg;
@item-blue:             @matching-bracket;
@item-cyan:             @item-theme;

@disabled:              #5b6270;
@scrollbar:             #495164;
@scrollbar-inactive:    #464e60;
@input-prompt:          @disabled;
@box-shadow:            #252b32;
@cc-border-command:     @selected-bg;
@cc-border-edit:        #61886e;
@tc-border:             @header-fg;
@tc-border-edit:        #33517c;
@button-color:          @selected-bg;
@table-color:           @cc-input-fg;
@table-bg:              @cc-output-bg;

/* onedark codemirror colors */
@ansiblack:             #2b303b;
@ansiblue:              #DB797C;
@ansigray:              #B4B7B4;
@ansigreen:             #B5C2D9;
@ansipurple:            #CAA6EC;
@ansicyan:              #77ABE7;
@ansiyellow:            #DDD7A3;
@ansired:               #798daf;

@stderr-bg:             #DB797C;
@stderr-fg:             #D0D4E6;
@js-error:              @stderr-bg;

@cm-selected:           #2b313a;
@cm-gutters:            @cm-selected;
@cm-linenumber:         @disabled;
@cm-cursor:             #528bff;
@cm-comment:            #5b6270; //#484e5e;
@cm-atom:               #61afef; //#5cadf1;
@cm-number:             #ec9d66;
@cm-property:           @cm-atom;
@cm-attribute:          #dc6972;
@cm-keyword:            #c776df; //#c776df;
@cm-string:             #94c273; //#8fb36a;
@cm-meta:               #51b6c3;
@cm-operator:           #5cadf1;
@cm-builtin:            @cm-attribute;
@cm-variable:           @cc-input-fg;
@cm-variable2:          @cm-attribute;
@cm-variable3:          @cm-meta;

@cm-def:                @cm-atom;
@cm-error:              @selected-error;
@cm-tag:                @cm-atom;
@cm-link:               @cm-number;
@cm-storage:            @cm-property;
@cm-entity:             @cm-property;
@cm-latex:              #8fb36a;

error: pathspec 'jupyterthemes/styles/onedark.less' did not match any file(s) known to git


indent with hard tabs pls

indent with hard tabs pls

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/demhydraz/til.git/'


adds bootstrap tooltip css

adds bootstrap tooltip css

//
// Tooltips
// --------------------------------------------------

// Base class
.tooltip {
  position: absolute;
  z-index: @zindexTooltip;
  display: block;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  .opacity(0);
  &.in     { .opacity(80); }
  &.top    { margin-top:  -3px; }
  &.right  { margin-left:  3px; }
  &.bottom { margin-top:   3px; }
  &.left   { margin-left: -3px; }
}

// Wrapper for the tooltip content
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: @tooltipColor;
  text-align: center;
  text-decoration: none;
  background-color: @tooltipBackground;
  .border-radius(4px);
}

// Arrows
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip {
  &.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
    border-top-color: @tooltipArrowColor;
  }
  &.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
    border-right-color: @tooltipArrowColor;
  }
  &.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
    border-left-color: @tooltipArrowColor;
  }
  &.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -@tooltipArrowWidth;
    border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
    border-bottom-color: @tooltipArrowColor;
  }
}

error: pathspec 'static/libs/bootstrap/css/tooltip.less' did not match any file(s) known to git


Shows more users ATF

Shows more users ATF

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/xavifuefer/userFinder.git/'


Create 02-webfonts-hx.less

Create 02-webfonts-hx.less

/* here the font faces */

/*@font-face {

}*/

h1,
.h1 {
  display: block;
  .flow_hx(26); // equiv 26px
  font-weight: normal;
}
h2,
.h2 {
  display: block;
  .flow_hx(24); // equiv 24px
  font-weight: normal;
}
h3,
.h3 {
  display: block;
  .flow_hx(22); // equiv 22px
  font-weight: normal;
}
h4,
.h4 {
  display: block;
  .flow_hx(20); // equiv 20px
  font-weight: normal;
}
h5,
.h5 {
  display: block;
  .flow_hx(18); // equiv 18px
  font-weight: normal;
}
h6,
.h6 {
  display: block;
  .flow_hx(16); // equiv 16px
  font-weight: normal;
}

.uppercase {
  text-transform: uppercase;
}

/* other useful classes */
.smaller {
  .flow_other(10); // equiv 10px
}
.small {
  .flow_other(12); // equiv 12px
}
.big {
  .flow_other(16); // equiv 16px
}
.bigger {
  .flow_other(18); // equiv 18px
}
.biggest {
  .flow_other(20); // equiv 20px
}

error: pathspec 'less/rocssti-en/02-webfonts-hx.less' did not match any file(s) known to git


display none onload  (lightbox thing)  basket. textarea higher

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'


New styles for price

New styles for price

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


code,pre line-height: 1

code,pre line-height: 1

remote: Repository unavailable due to DMCA takedown.
remote: See the takedown notice for more details:
remote:   https://github.com/github/dmca/blob/master/2022/01/2022-01-27-jetbrains-2.md.
fatal: unable to access 'https://github.com/qbbr/source.qbbr.github.io.git/': The requested URL returned error: 403


changed the border radius

changed the border radius

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/dedalozzo/pit-bootstrap.git/'


Remise en place d'un debug.less en plus de _debug.less pour retrocompatibilité

	h1,h2,h3,h4,h5,h6 { border:1px solid #afa; }
	p { border:1px solid #faf; }

	.col-a, .col-b, .col-c, .col-d, .col-e, .col-f, .color-smallcol { background:#7ee; color:#fff; }
	.col-fa, .col-fb, .col-fc, .col-fd, .col-fe, .col-ff, .color-largecol { background:#e7e; color:#fff; }
	.galaxie, .color-galaxie { background:#555; background:none; }
	body { background:#444; padding-bottom:260px; }
	strong { color:#000; }
	small { background:#ddd; color:#000; }

	header.header { background:#baa; }

	section, .color-section { background:#466; border:4px dotted #644; }
	section.content, .color-sectioncontent { background:#646; border:4px dotted #464; }
	section.widget, .color-sectionwidget { background:#664; border:4px dotted #446; }

	aside.aside, .color-aside { background:#a5a; border:1px dotted #5a5; }
	aside.widget, .color-asidewidget { background:#aa5; border:4px dotted #55a; }

	footer.footer { background:#aab; }

	article, .color-article { background:#aab; }
	article section, article header, article footer, .color-articlesection { background:#bbb; }

.thecolumns {
  div {
    background:red;
    .make-xs-column(1);
    .text-center();
    span {
      background:blue;
      display:block;
    }
  }
}

error: pathspec 'assets/less/debug.less' did not match any file(s) known to git


Links Less

Links Less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Shivabeach/herbs.git/'


Color pass

Color pass

/**
 * Sentry Color Palette
 * ============================================================================
 */

@blue:                #5f92c7;
@blue-light:          lighten(@blue, 10%);
@blue-dark:           darken(@blue, 10%);

@green:               #86C760;
@green-light:         lighten(@green, 10%);
@green-dark:          darken(@green, 10%);

@yellow:              #F6D846;
@yellow-light:        lighten(@yellow, 10%);
@yellow-dark:         darken(@yellow-light, 10%);

@yellow-orange:       #f8a466;
@yellow-orange-light: lighten(@yellow-orange, 10%);
@yellow-orange-dark:  darken(@yellow-orange, 10%);

@orange:              #f26e4e;
@orange-light:        lighten(@orange, 10%);
@orange-dark:         darken(@orange, 10%);

@red:                 #e25140;
@red-light:           lighten(@red, 10%);
@red-dark:            darken(@red, 10%);

@pink:                #F868BC;
@pink-light:          lighten(@pink, 10%);
@pink-dark:           darken(@pink, 10%);

@purple:              #6C5FC7;
@purple-light:        lighten(@purple, 10%);
@purple-dark:         darken(@purple, 10%);

@gray:                @70;
@gray-light:          desaturate(@50, 5%);
@gray-lighter:        @30;
@gray-lightest:       @20;
@gray-dark:           @80;
@gray-darker:         @90;
@gray-darkest:        @100;

@white:               #FFFFFF;
@white-dark:          #FBFBFC;
@white-darker:        #F7F8F9;
@white-darkest:       darken(@white-darker, 6);

/**
 * Shortcuts
 * ============================================================================
 */

@link-color:          @blue;
@link-color-hover:    @blue-dark;
@header-bg-color:     @gray-dark;
@trim:                @gray-lightest;

/**
 * Playing around
 * ============================================================================
 */

@100: desaturate(#15101c, 18%);
@90: lighten(@100, 10%);
@80: lighten(@100, 20%);
@70: lighten(@100, 30%);
@60: lighten(@100, 40%);
@50: lighten(@100, 50%);
@40: lighten(@100, 60%);
@30: lighten(@100, 70%);
@20: lighten(@100, 80%);
@10: lighten(@100, 90%);

/**
 * Sentry Color Palette
 * ============================================================================
 */

@blue:                #2EA2F5;
@blue-light:          lighten(@blue, 10%);
@blue-dark:           darken(@blue, 10%);

@green:               #86C760;
@green-light:         lighten(@green, 10%);
@green-dark:          darken(@green, 10%);

@yellow:              #F6D846;
@yellow-light:        lighten(@yellow, 10%);
@yellow-dark:         darken(@yellow-light, 10%);

@yellow-orange:       #f8a466;
@yellow-orange-light: lighten(@yellow-orange, 10%);
@yellow-orange-dark:  darken(@yellow-orange, 10%);

@orange:              #f26e4e;
@orange-light:        lighten(@orange, 10%);
@orange-dark:         darken(@orange, 10%);

@red:                 #e25140;
@red-light:           lighten(@red, 10%);
@red-dark:            darken(@red, 10%);

@pink:                #F868BC;
@pink-light:          lighten(@pink, 10%);
@pink-dark:           darken(@pink, 10%);

@purple:              #6C5FC7;
@purple-light:        lighten(@purple, 10%);
@purple-dark:         darken(@purple, 10%);

@gray:                @70;
@gray-light:          desaturate(@50, 5%);
@gray-lighter:        @30;
@gray-lightest:       @20;
@gray-dark:           @80;
@gray-darker:         @90;
@gray-darkest:        @100;

@white:               #FFFFFF;
@white-dark:          #FBFBFC;
@white-darker:        #F7F8F9;
@white-darkest:       darken(@white-darker, 6);

/**
 * Shortcuts
 * ============================================================================
 */

@link-color:          @blue;
@link-color-hover:    @blue-dark;
@header-bg-color:     @gray-dark;
@trim:                @gray-lightest;

/**
 * Playing around
 * ============================================================================
 */

@100: desaturate(#15101c, 16%);
@90: lighten(@100, 10%);
@80: lighten(@100, 20%);
@70: lighten(@100, 30%);
@60: lighten(@100, 40%);
@50: lighten(@100, 50%);
@40: lighten(@100, 60%);
@30: lighten(@100, 70%);
@20: lighten(@100, 80%);
@10: lighten(@100, 90%);


Tweak purple/orange

Tweak purple/orange


padding-bottom from 8px to 6px

padding-bottom from 8px to 6px


Create main.less

Create main.less

/* twitter bootstrap, including custom variables */
@import 'bootstrap.less';

/* paths */
@font-dir: '/assets/font';
@img-dir: '/assets/img';

/* font icons */
@font-face
{
	font-family : 'icomoon';
	font-style : normal;
	font-weight : normal;
	src : url("@{font-dir}/icomoon.eot");
	src : url("@{font-dir}/icomoon.eot?#iefix") format('embedded-opentype'),
		url("@{font-dir}/icomoon.woff") format('woff'),
		url("@{font-dir}/icomoon.ttf") format('truetype'),
		url("@{font-dir}/icomoon.svg#icomoon") format('svg');
}

[class*='icon-']:before
{
	-webkit-font-smoothing : antialiased;
	font-family : 'icomoon';
	font-style : normal;
	font-variant : normal;
	font-weight : normal;
	line-height : 1;
	margin-right : 5px;
	speak : none;
	text-transform : none;
}

.icon-locked:before
{
	color : #778899;
	content: '\e000';
}

.icon-protected:before
{
	color : #4979b9;
	content: '\e001';
}

.icon-wikied:before
{
	color : #2F4F4F;
	content: '\e002';
}

.icon-accepted:before
{
	color : #46b525;
	content: '\e003';
}

.icon-up:before {content: '\e004';}
.icon-down:before {content: '\e005';}

/* global styles */

* {	font-family : 'Droid Sans', 'sans-serif' !important;}

html
{
	margin : 0 auto;
	max-width : 1005px;
}

body {margin : 10px;}

legend
{
	font-size : medium;
	font-weight : bold;
}

h1
{
	border-bottom : 1px solid #e5e5e5;
	font-size : 30px;
	padding-bottom : 15px;

	small {font-size : small;}
}

.disabled {text-decoration : line-through;}

#data-sources
{
	float : right;
	text-align : right;
	line-height : 25px;

	strong
	{
		border-bottom : 1px solid #e5e5e5;
		padding-bottom : 5px;
	}

	small {margin : 0 5px;}
}

#data-table
{
	border-top : 0;

	&.show-scroll
	{
		padding-left : 0;

		tbody
		{
			height : 348px;
			overflow : auto;
			overflow-y : scroll;
		}

		.c1 {width : 172px;}
		.c2 {padding-right : 20px;}
		.go-top {display : none;}
		.title {width : 725px;}
	}

	.title
	{
		text-align : left;
		width : 740px;

		a {margin-right : 5px;}
	}

	.go-top // severe layout issues with this right now, try later
	{
		position : relative;
		right : 35px;
		top : 35px;
		display : none; // buggy

		div
		{
			border : 1px solid #e5e5e5;
			border-radius : 4px 0 0 4px;
			border-right : 0;
			line-height : 15px;
			padding : 5px 0;
			position : fixed;
			text-align : center;

			[class*='icon-']:before
			{
				margin : 0;
				padding : 10px;
			}

			a:hover {text-decoration : none;}
		}
	}

	.c1
	{
		border-radius : 4px 4px 0 0;
		border-top : 1px solid #e5e5e5;
		width : 157px;
	}

	.c4
	{
		width : 55px;

		&.border {border-radius : 4px 0 0 0;}
	}

	.c2, .c3 {width : 45px;}

	thead
	{
		display : block;

		th, div
		{
			background-color : #f8f8ff;
			text-align : center;
		}

		& > tr
		{
			display : table;
			width : 100%;
		}

		.stats
		{
			background-color : transparent;
			border : 0;
			font-weight : normal;
			padding-right : 10px;
			text-align : right;
		}
	}

	tbody
	{
		display : block;

		tr
		{
			td.failure
			{
				color : #b94a48;
				background-color : transparent;
				display : block;
				font-weight : bold;
				padding : 25px;
				text-align : center;
				width : 985px;
			}

			&.adelv > td {background-color: @autodeleteBackground;}
			&.cv > td {background-color: @warningBackground;}
			&.delv > td {background-color: @errorBackground;}
			&.ro > td {background-color: @successBackground;}
			&.rv > td {background-color: @infoBackground;}

			&.adelv:hover > td {background-color: darken(@autodeleteBackground, 5%);}
			&.cv:hover > td {background-color: darken(@warningBackground, 5%);}
			&.delv:hover > td {background-color: darken(@errorBackground, 5%);}
			&.ro:hover > td {background-color: darken(@successBackground, 5%);}
			&.rv:hover > td {background-color: darken(@infoBackground, 5%);}
		}

		a:visited {color : @linkColorVisited;}
		td {text-align : center;}
	}

	strong {margin : 0 5px 0 15px;}

	&.hide-adelv .adelv, &.hide-cv .cv, &.hide-delv .delv,
	&.hide-ro .ro, &.hide-rv .rv {display : none;}
}

#options-form
{
	float : left;
	line-height : 30px;
	margin : 0 50px 0 0;

	label
	{
		border-radius : 4px;
		margin-right : 20px;
		padding : 0 5px;

		&.adelv {background-color : @autodeleteBackground;}
		&.cv {background-color : @warningBackground;}
		&.delv {background-color : @errorBackground;}
		&.ro {background-color : @successBackground;}
		&.rv {background-color : @infoBackground;}

		input {margin-right : 5px;}
	}

	select
	{
		width : 42px;
		height : 20px;
		padding : 0;

	}

	button {margin-left : 15px;}
	strong {margin-right : 15px;}
}

#legend
{
	margin : 0;

	span
	{
		line-height : 30px;
		padding-right : 20px;
	}
}

#footer {text-align : center;}

error: pathspec 'asset/less/main.less' did not match any file(s) known to git


fixed derpy profile image size in /search

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/cablelabs/dev-portal.git/'


add some colors

add some colors

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Lmzd/A.N.git/'


fix support image vertical rhythm

fix support image vertical rhythm

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


Builder LESS folder

Builder LESS folder

body{
  font-family: "Helvetica";
  text-align: center;
  padding: 50px 20px 0;
  background: #f4f4f7;
  color: #444;
  margin: 0;
}

h1{
  font-size: 65px;
  line-height: 1.2em;
  border-bottom: #CCC solid 1px;
  padding: 20px 0;
}

h3{
  font-weight: 300;
}

error: pathspec 'builder_files/less/main.less' did not match any file(s) known to git


Create storedialog.less

Create storedialog.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Tach-Yon/Tap-Tap-Adventure.git/'


blank messages less file

blank messages less file

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/cudim/pages-theme.git/'


Created slick.less

Created slick.less

/* Slider */

.slick-slider {
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {
    display: none;
}

error: pathspec 'slick/slick.less' did not match any file(s) known to git


Create theme.less

Create theme.less

@import url(https://bootswatch.com/yeti/variables.less);
@import url(https://bootswatch.com/yeti/bootswatch.less);

error: pathspec 'theme.less' did not match any file(s) known to git


Fix CSS style errors

Fix CSS style errors

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/datjwu/rb-screenshot.git/'


reenable mobile comparisons

reenable mobile comparisons

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Scotchester/owning-a-home.git/'


OR-2110 Comment !important to prevent inline css from notify library

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


fix transition-active for scale transitions

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aoimedia/uikit.git/'


"text-decoration: none" added on "uix-button".

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/elasthink/uix.git/'


Minor changes.

Minor changes.


Renaming variables for consistency.

Renaming variables for consistency.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Brightspace/valence-ui-link.git/'


Added styling for external links.

Added styling for external links.

body {
  background-color:#fff;
  margin: 0 auto;
  height:100%;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  color:@text-color;
  font:15px @sans-font;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  width: 960px;
  .mix-hyphens(auto);
}

@media screen and (max-width: 959px) {
  body {
    width: 100%;
  }
}

@media screen and (min-width: 960px) {
  body {
    width: 960px;
  }
}

/* Layout */

#main, #footer, #header {
  width: 96%;
  margin:auto;
}

#footer {
  text-align: center;
  font-size: 70%;
}

#toc {
  margin-top: -10px;
  ul {
    list-style-type: none;
    padding-left: 20px;
  }
  & > ul {
    padding-left: 0;
  }
}

/* Lists */

ul, ol {
  padding-left: 30px;
}

dl {
  padding: 0.5em;
  clear: both;
  margin: 5px 0;

  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;

    &:after {
      content: ":";
    }
  }

  dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
  }
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
  color: @heading-color;
  border-bottom: 1px solid @gray-d;
}

/* Blocks */

blockquote {
  border-left: 3px solid #dedede;
  padding:0px 10px;
  margin:10px 0;
  font-style: italic;
}

pre {
  .mix-box(@light-gray, @dark-gray, @gray);
  margin: auto;
  font-family: @monospace-font;
  code {
    box-shadow: none;
    background: @light-gray;
    padding: 0;
    border: none;
  }
}

table {
  .mix-box(transparent, @dark-gray, @gray);
  border-collapse:collapse;
  margin: 15px auto;
  border-spacing:0;
  empty-cells:show;
  thead {
    background: @light-gray;
    color:#222;
    text-align:left;
    vertical-align:bottom;
  }
  td, th {
    background-color:transparent;
    border:1px solid @gray;
    font-size:inherit;
    margin:0;
    overflow:visible;
    padding:6px 12px;
  }
}

address {
  font-style: italic;
  color: @gray;
}

hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

/* Inline */

code, span.code {
  .mix-inline-box(@light-gray, @dark-gray, @gray);
  font-family: @monospace-font;
  font-size: 80%;
  .mix-hyphens(none);
}

kbd, span.kbd {
  .mix-inline-box(@light-gray, @dark-gray, @gray);
  font-weight: bold;
  border-right: 1px solid @dark-gray;
  border-bottom: 1px solid @dark-gray;
  line-height: 0.9em;
  font-size: 85%;
  .mix-hyphens(none);
}

mark, span.mark {
  padding: 0 1px;
  color: @gray-2;
}

abbr, span.abbr {
  font-variant: small-caps;
  font-weight: bolder;
  .mix-hyphens(none);
  &:hover {
    cursor: help;
  }
}

samp, span.samp {
  font-size: 80%;
  .mix-inline-box(@light-gray, @dark-gray, @light-gray);
  .mix-hyphens(none);
}

var, span.var {
  font-size: 80%;
  font-family: @monospace-font;
  font-weight: bold;
  font-style: normal;
  .mix-hyphens(none);
}

cite, span.cite {
  font-weight: bold;
  font-style: italic;
  .mix-hyphens(none);
}

q, span.q {
  font-style: italic;
  color: @gray-6;
  .mix-hyphens(none);
}

tt, span.tt {
  font-family: @monospace-font;
  font-size: 80%;
  .mix-hyphens(none);
}

/* Links */

a,a:visited {
  color: @link-color;
  text-decoration:none;
  &:hover {
    text-decoration:underline;
  }
}
a[href^="http://"]:before,
a[href^="https://"]:before,
a[href^="ftp://"]:before,
a[href^="sftp://"]:before,
a[href^="mailto://"]:before
{
  content: "\2197";
  font-size: 0.8em;
}


Swiper buttons

Swiper buttons

/* === Color Themes === */
.theme-mixin(@colorName, @color, @colorHex) {
    //Plain color and links
    .color-@{colorName} {
        color: @color;
        .list-block .item-link.list-button&, .tabbar a.active&, a& {
            color: @color;
        }
        .label-switch input[type="checkbox"]:checked + .checkbox&, .label-switch& input[type="checkbox"]:checked + .checkbox{
            background-color: @color;
        }
    }
    //Buttons
    .color-@{colorName}.button:not(.button-fill), .color-@{colorName}.buttons-row .button, .theme-@{colorName} .button:not(.button-fill) {
        border-color: @color;
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.15);
        }
        &.active {
            background-color: @color;
            color:#fff;
        }
    }
    .theme-@{colorName} .button.button-fill, .button.button-fill.color-@{colorName} {
        background: @color;
        color:#fff;
    }
    //Icons
    .color-@{colorName}, .theme-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    i.icon-next.color-@{colorName}, i.icon-next.theme-@{colorName}, .theme-@{colorName} i.icon-next {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23@{colorHex}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
    i.icon-prev.color-@{colorName}, i.icon-prev.theme-@{colorName}, .theme-@{colorName} i.icon-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23@{colorHex}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    i.icon-back.color-@{colorName}, i.icon-back.theme-@{colorName}, .theme-@{colorName} i.icon-back {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23@{colorHex}'/></svg>");
    }
    i.icon-forward.color-@{colorName}, i.icon-forward.theme-@{colorName}, .theme-@{colorName} i.icon-forward {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23@{colorHex}'/></svg>");
    }
    i.icon-bars.color-@{colorName}, i.icon-bars.theme-@{colorName}, .theme-@{colorName} i.icon-bars {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23@{colorHex}' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
        @media all and (-webkit-max-device-pixel-ratio: 1), (max-resolution: 120dppx) {
            background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'><path fill='%23@{colorHex}' d='M0,0h2v2H0V0z M4,0h17v1H4V0z M0,6h2v2H0V6z M4,6h17v1H4V6z M0,12h2v2H0V12z M4,12h17v1H4V12z'/></svg>");
        }
    }
    // Theme
    .theme-@{colorName} {
        a, .item-link.list-button {
            color: @color;
        }
        .tabbar, .tabbar& {
            a {
                color:inherit;
            }
            a.active {
                color:@color;
            }
        }
        .range-slider, .range-slider& {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
        }
        label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox, label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
            background-color: @color;
        }
        label.label-radio input[type="checkbox"]:checked ~ .item-inner, label.label-radio input[type="radio"]:checked ~ .item-inner {
            background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23@{colorHex}' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
        }
        .swiper-pagination-bullet-active {
            background-color: @color;
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
    }
    .swiper-button-next {
        &.color-@{colorName}, .theme-@{colorName} & {
            background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23@{colorHex}'/></svg>");
        }
    }
    .swiper-button-prev {
        &.color-@{colorName}, .theme-@{colorName} & {
            background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%23@{colorHex}'/></svg>");
        }
    }
    // Bg rule
    .bg-@{colorName}, .button.button-fill.bg-@{colorName}, a.bg-@{colorName}, .list-block .swipeout-actions-left a.bg-@{colorName}, .list-block .swipeout-actions-right a.bg-@{colorName} {
        background-color: @color;
    }
    // Border rule
    .border-@{colorName} {
        border-color: @color;
    }
}
.theme-mixin(e('gray'), #8e8e93, '8e8e93');
.theme-mixin(e('white'), #ffffff, 'ffffff');
.theme-mixin(e('black'), #000000, '000000');
.theme-mixin(e('lightblue'), #5ac8fa, '5ac8fa');
.theme-mixin(e('yellow'), #ffcc00, 'ffcc00');
.theme-mixin(e('orange'), #ff9500, 'ff9500');
.theme-mixin(e('pink'), #ff2d55, 'ff2d55');
.theme-mixin(e('blue'), #007aff, '007aff');
.theme-mixin(e('green'), #4cd964, '4cd964');
.theme-mixin(e('red'), #ff3b30, 'ff3b30');

/* === Color Themes === */
.theme-mixin(@colorName, @color, @colorHex) {
    //Plain color and links
    .color-@{colorName} {
        color: @color;
        .list-block .item-link.list-button&, .tabbar a.active&, a& {
            color: @color;
        }
        .label-switch input[type="checkbox"]:checked + .checkbox&, .label-switch& input[type="checkbox"]:checked + .checkbox{
            background-color: @color;
        }
    }
    //Buttons
    .color-@{colorName}.button:not(.button-fill), .color-@{colorName}.buttons-row .button, .theme-@{colorName} .button:not(.button-fill) {
        border-color: @color;
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.15);
        }
        &.active {
            background-color: @color;
            color:#fff;
        }
    }
    .theme-@{colorName} .button.button-fill, .button.button-fill.color-@{colorName} {
        background: @color;
        color:#fff;
    }
    //Icons
    .color-@{colorName}, .theme-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    i.icon-next.color-@{colorName}, i.icon-next.theme-@{colorName}, .theme-@{colorName} i.icon-next {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23@{colorHex}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
    i.icon-prev.color-@{colorName}, i.icon-prev.theme-@{colorName}, .theme-@{colorName} i.icon-prev {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='%23@{colorHex}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    i.icon-back.color-@{colorName}, i.icon-back.theme-@{colorName}, .theme-@{colorName} i.icon-back {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23@{colorHex}'/></svg>");
    }
    i.icon-forward.color-@{colorName}, i.icon-forward.theme-@{colorName}, .theme-@{colorName} i.icon-forward {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='%23@{colorHex}'/></svg>");
    }
    i.icon-bars.color-@{colorName}, i.icon-bars.theme-@{colorName}, .theme-@{colorName} i.icon-bars {
        background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26'><path fill='%23@{colorHex}' d='M0,0h4v4H0V0z M8,1h34v2H8V1z M0,11h4v4H0V11z M8,12h34v2H8V12z M0,22h4v4H0V22z M8,23h34v2H8V23z'/></svg>");
        @media all and (-webkit-max-device-pixel-ratio: 1), (max-resolution: 120dppx) {
            background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'><path fill='%23@{colorHex}' d='M0,0h2v2H0V0z M4,0h17v1H4V0z M0,6h2v2H0V6z M4,6h17v1H4V6z M0,12h2v2H0V12z M4,12h17v1H4V12z'/></svg>");
        }
    }
    // Theme
    .theme-@{colorName} {
        a, .item-link.list-button {
            color: @color;
        }
        .tabbar, .tabbar& {
            a {
                color:inherit;
            }
            a.active {
                color:@color;
            }
        }
        .range-slider, .range-slider& {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
        }
        label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox, label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox {
            background-color: @color;
        }
        label.label-radio input[type="checkbox"]:checked ~ .item-inner, label.label-radio input[type="radio"]:checked ~ .item-inner {
            background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='%23@{colorHex}' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
        }
        .slider-pagination-active {
            background-color: @color;
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
    }
    // Bg rule
    .bg-@{colorName}, .button.button-fill.bg-@{colorName}, a.bg-@{colorName}, .list-block .swipeout-actions-left a.bg-@{colorName}, .list-block .swipeout-actions-right a.bg-@{colorName} {
        background-color: @color;
    }
    // Border rule
    .border-@{colorName} {
        border-color: @color;
    }
}
.theme-mixin(e('gray'), #8e8e93, '8e8e93');
.theme-mixin(e('white'), #ffffff, 'ffffff');
.theme-mixin(e('black'), #000000, '000000');
.theme-mixin(e('lightblue'), #5ac8fa, '5ac8fa');
.theme-mixin(e('yellow'), #ffcc00, 'ffcc00');
.theme-mixin(e('orange'), #ff9500, 'ff9500');
.theme-mixin(e('pink'), #ff2d55, 'ff2d55');
.theme-mixin(e('blue'), #007aff, '007aff');
.theme-mixin(e('green'), #4cd964, '4cd964');
.theme-mixin(e('red'), #ff3b30, 'ff3b30');


add button styling

add button styling

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


Substituting colour variables for hitherto hard-coded pages.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/QueensSailing/QueensSailing.github.io.git/'


[feature/UX-71] fix close button position as requested

/*!
* Jenkins Design Language CSS Theme
*
* Licensed under MIT
*/
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
@import "icons.less";

//
// Base font stuffs
// --------------------------------------------------

html {
    font-size: 62.5%; // Make 1rem == 10px
}

#root {
    font-size: 1.4rem;
}

body {
    text-rendering: optimizeSpeed;
    font-feature-settings: "kern" on, "liga" off;
    -moz-font-feature-settings: "kern" on, "liga" off;
    //TODO: Do we really want this for everything? -webkit-font-smoothing: antialiased;
}

//
// Some basics
// --------------------------------------------------

* {
    box-sizing: border-box;
}

// Default All headings to basically "bold and display:block"
h1, h2, h3, h4, h5 h6 {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

// Make h1 slightly bigger :)
h1 {
    font-size: 1.8rem;
    font-family: @font-family-nav;
    letter-spacing: 1.1px;
}

main {
    color: @text-color;
}

.label-danger {
    background-color: @brand-danger;
}

.label-warning {
    background-color: @brand-warning;
}

.label-info {
    background-color: @brand-info;
}

.label-success {
    background-color: @brand-success;
}

.label-primary {
    background-color: @brand-primary;
}

.btn-link {
    color: @link-color;
}

a {
    text-decoration: none;
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
a {
    color: @link-color;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:focus .list-group-item-text,
.list-group-item.active:hover .list-group-item-text {
    color: white;
}

a:hover {
    color: @link-hover-color;
    text-decoration: @link-hover-decoration;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus {
    background-color: @link-color;
}

.nav-pills > li.active > a:hover {
    background-color: @link-hover-color;
}

.progress-bar {
    background-color: @progress-bar-bg;
}

body {
    font-family: @font-family-base;
    background-color: @body-bg;
}

code, pre, kbd {
    font-family: @font-family-monospace;
}

//
// Buttons
// --------------------------------------------------

// Mixin for generating btn styles
.btn-styles(@btn-color; @btn-border; @btn-text) {

    display:inline-block;
    padding:0.5rem 1rem;
    font-family: @font-family-btn;

    border: solid 1px  @btn-border;
    border-radius:3px;

    text-decoration: none;

    background-color: @btn-color;
    color: @btn-text;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: @btn-color;
        border-color: darken(@btn-border, 12%);
        color: @btn-text;
        text-decoration:none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: darken(@btn-color, 12%);
        }
    }
}

// Apply the mixin to the buttons
.btn-default, .btn, button {
    .btn-styles(@btn-default-bg, @btn-default-border, @btn-default-color);
}

.btn-primary {
    .btn-styles(@btn-primary-bg, @btn-primary-border, @btn-primary-color);
}

.btn-success {
    .btn-styles(@btn-success-bg, @btn-success-border, @btn-success-color);
}

.btn-info {
    .btn-styles(@btn-info-bg, @btn-info-border, @btn-info-color);
}

.btn-warning {
    .btn-styles(@btn-warning-bg, @btn-warning-border, @btn-warning-color);
}

.btn-danger {
    .btn-styles(@btn-danger-bg, @btn-danger-border, @btn-danger-color);
}

.btn-ghost {
    .btn-styles(@btn-ghost-bg, @btn-ghost-border, @btn-ghost-color);
}

//
// Images
// --------------------------------------------------

.thumbnail,
.img-thumbnail {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

//
// Dropdowns
// --------------------------------------------------

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
    background-color: darken(@dropdown-link-hover-bg, 5%);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    background-color: darken(@dropdown-link-active-bg, 5%);
}

// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
    .navbar .navbar-nav .open .dropdown-menu > .active > a {
        &,
        &:hover,
        &:focus {
            color: #fff;
            #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
        }
    }
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
    border: none;
}

// Mixin for generating new styles
.alert-styles(@color; @text-color; @border-color) {
    background-color: @color;
    color: @text-color;
    border-radius: 3px;
}

// Apply the mixin to the alerts
.alert-success {
    .alert-styles(@alert-success-bg, @alert-success-text, @alert-success-border);
}

.alert-info {
    .alert-styles(@alert-info-bg, @alert-info-text, @alert-info-border);
}

.alert-warning {
    .alert-styles(@alert-warning-bg, @alert-warning-text, @alert-warning-border);
}

.alert-danger {
    .alert-styles(@alert-danger-bg, @alert-danger-text, @alert-danger-border);
}

//
// Progress bars
// --------------------------------------------------

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

// Mixin for generating new styles
.progress-bar-styles(@color) {
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

// Apply the mixin to the progress bars
.progress-bar {
    .progress-bar-styles(@progress-bar-bg);
}

.progress-bar-success {
    .progress-bar-styles(@progress-bar-success-bg);
}

.progress-bar-info {
    .progress-bar-styles(@progress-bar-info-bg);
}

.progress-bar-warning {
    .progress-bar-styles(@progress-bar-warning-bg);
}

.progress-bar-danger {
    .progress-bar-styles(@progress-bar-danger-bg);
}

// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
    #gradient > .striped();
}

//
// List groups
// --------------------------------------------------

.list-group {
    border-radius: @border-radius-base;
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
    #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
    border-color: darken(@list-group-active-border, 7.5%);

    .badge {
        text-shadow: none;
    }
}

//
// Panels
// --------------------------------------------------

// Common styles
.panel {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .05));
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
    background-color: @color;
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
    color: white;
    border: inherit;
}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading {
    .panel-heading-styles(@panel-default-heading-bg);
}

.panel-primary > .panel-heading {
    .panel-heading-styles(@panel-primary-heading-bg);
}

.panel-success > .panel-heading {
    .panel-heading-styles(@panel-success-heading-bg);
}

.panel-info > .panel-heading {
    .panel-heading-styles(@panel-info-heading-bg);
}

.panel-warning > .panel-heading {
    .panel-heading-styles(@panel-warning-heading-bg);
}

.panel-danger > .panel-heading {
    .panel-heading-styles(@panel-danger-heading-bg);
}

// Fix all the hardcoded borders set in bootstrap.css
.panel-default {
    border-color: @panel-default-border;
}

.panel-primary {
    border-color: @panel-primary-border;
}

.panel-success {
    border-color: @panel-success-border;
}

.panel-info {
    border-color: @panel-info-border;
}

.panel-warning {
    border-color: @panel-warning-border;
}

.panel-danger {
    border-color: @panel-danger-border;
}

//
// Wells
// --------------------------------------------------

.well {
    #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
    border-color: darken(@well-bg, 10%);
    @shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
    .box-shadow(@shadow);
}

//
// Tables
// --------------------------------------------------

table {
    width: 100%;
}

thead tr:last-child {
    border-bottom: solid 1px;
    th {
        padding-bottom: 1.5rem;
    }
}

tbody tr:first-child td {
    padding-top: 1rem;
}

th {
    font-family: @font-family-headings;
    font-weight: normal;
}

td, th {
    padding: 0.5em 0;
    text-align: left;
}

th:first-child,
td:first-child {
    padding-left: 1em;
}

//
// Code / Logs
// --------------------------------------------------

code {
    background-color: @pre-bg;
    color: @pre-color;
    font-family: @font-family-monospace;
    width: 100%;
    min-height: 12px;
    white-space: normal;
    border: 1px solid @pre-border-color;
    border-radius: 4px;
    position: relative;
    counter-reset: line-numbering;
    overflow-x: auto;
    font-size: 1.1rem;
}
code p:hover{
    background-color: @pre-color-hover;
}
code p {
  margin: 0;
}
code p::nth-line {
  color: yellow !important;
}
code a {
    margin: 0;
    padding: 0 15px 0 20px;
    word-wrap:break-word;
    display: inline;
    color: @pre-color;
}
code a:hover {
    color: @pre-color;
    text-decoration: none;
}

code p a::before {
    opacity: 0.4;
    content: counter(line-numbering);
    counter-increment: line-numbering;
    float: left;
    min-width: 20px;
    white-space: nowrap;
    padding-right: 1em;
    padding-left:10px;
    text-align: right;
}

code.block {
    background-color: @pre-bg;
    color: @pre-color;
    display: block;
    padding: 0.5rem;
    white-space: pre;
    //max-height: @pre-scrollable-max-height;
    border: solid 1px darken(@pre-bg, 20%);;
}

code.inline {
    display: inline-block;
    padding: inherit;
    white-space: pre-wrap;
}

//
// Mono Icons
// --------------------------------------------------

.material-icons {
    color: @brand-primary;
}

.material-icons.selected {
    color: @brand-warning;
}

//
// Layout elements
// --------------------------------------------------

.content-width {
    min-width: 70rem;
    margin-left: 100px;
    margin-right: 100px;

    @media screen and (max-width: 1000px) {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.global-header {
    font-size: 1.8rem;
    background-color: @header-bg;
    color: white;
}

.global-header a {
    color: white;
}

.global-header nav {
    text-align: center;
    padding: 2rem 0;
}

.global-header nav a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-family: @font-family-nav;
    letter-spacing: 1.12px;
}

.global-header a:hover {
    color: black;
}

.sub-header {
    background-color: @sub-header-bg;
    color: @text-color;
    padding: 0;
}

.sub-header nav.page-title {
    .content-width;
    display: flex;
    height: 8.2rem;
    align-items: center;

    // Put some spacing between children
    > * {
        margin-right: 1rem;

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

.sub-header nav.page-tabs {
    .content-width;
}

.page-tabs a {
    color: @text-color;
    display: inline-block;
    padding: 0.6rem 1rem 0;
    height: 33px;
    font-family: @font-family-nav;
    text-decoration: none;

    // For transforming underline
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    margin-bottom: -3px;
}

.page-tabs a:before {
    // For transforming underline
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: @brand-primary;
    height: 3px;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
    transform: translateY(3px);
    transition-property: transform;
}

.page-tabs a.selected:before,
.page-tabs:hover a.selected:hover:before,
.page-tabs a:hover:before {
    // For transforming underline
    transform: translateY(0);
}

.page-tabs:hover a.selected:before {
    // For transforming underline
    transform: translateY(3px);
}

main article {
    .content-width;
    padding: 1rem 0;
}

.container-fluid {
    padding: 0;
}

footer {
    text-align: center;
    margin: 1em;
}

// Modal css
.overlayStyles {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zIndex: 99;
    background-color: rgba(0,0,0,0.3);
}

.dialog {
    width: 100%;
    display: block;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.dialog .header {
    padding: 25px 20px 25px 50px;
    color: #ffffff;
    font-weight: normal;
    line-height: 20px;
    overflow-y: auto;
    max-height: 20%;
    min-height: 5%;
}
.dialog section h4 {
    padding-bottom: 5px;
}

.dialog section .times {
    padding-left: 40px;
}

.dialog section .commons {
    position: relative;
    top: -5px;
}

.dialog section .times span {
  vertical-align: top;
}

.dialog section .times svg{
    padding-right: 25px;
}

.dialog section.left svg{
    padding-right: 20px;
    padding-left: 20px;
    margin-top: -20px;
}

.dialog .table {
    display: table;
}

.dialog .result {
    width: 100%;
    margin: 20px auto;
    font-family: @font-family-panel;
    color: #ffffff;
}

.dialog .result .row {
    display: table-row;
}

.dialog .result .row div {
    display: table-cell;
}

.dialog .result .row div div {
    display: block;
}

.dialog .header.info{
    background-color: @header-bg;
}

.dialog .header.success{
    padding: 0;
    background-color: @brand-success;
}

.dialog .header.failure{
    padding: 0;
    background-color: @brand-danger;
}

.dialog .content {
    background-color: @modal-content-bg;
    color: #000;
    overflow-y: auto;
    max-height: 90%;
    min-height: 75%;
    padding: 25px 20px 25px 50px;
}

.header .title {
    margin-top: 0
}

.header .closeButton {
    cursor: pointer;
    position: absolute;
    font-size: 3em;
    color: #ffffff;
    right: 10px;
    top: 10px
}
.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
circle.success {
    fill: @brand-success;
}
circle.failure {
    fill: @brand-danger;
}
.left {
    float: left;
}
.right {
    float: right;
}

/*!
* Jenkins Design Language CSS Theme
*
* Licensed under MIT
*/
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
@import "icons.less";

//
// Base font stuffs
// --------------------------------------------------

html {
    font-size: 62.5%; // Make 1rem == 10px
}

#root {
    font-size: 1.4rem;
}

body {
    text-rendering: optimizeSpeed;
    font-feature-settings: "kern" on, "liga" off;
    -moz-font-feature-settings: "kern" on, "liga" off;
    //TODO: Do we really want this for everything? -webkit-font-smoothing: antialiased;
}

//
// Some basics
// --------------------------------------------------

* {
    box-sizing: border-box;
}

// Default All headings to basically "bold and display:block"
h1, h2, h3, h4, h5 h6 {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

// Make h1 slightly bigger :)
h1 {
    font-size: 1.8rem;
    font-family: @font-family-nav;
    letter-spacing: 1.1px;
}

main {
    color: @text-color;
}

.label-danger {
    background-color: @brand-danger;
}

.label-warning {
    background-color: @brand-warning;
}

.label-info {
    background-color: @brand-info;
}

.label-success {
    background-color: @brand-success;
}

.label-primary {
    background-color: @brand-primary;
}

.btn-link {
    color: @link-color;
}

a {
    text-decoration: none;
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
a {
    color: @link-color;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:focus .list-group-item-text,
.list-group-item.active:hover .list-group-item-text {
    color: white;
}

a:hover {
    color: @link-hover-color;
    text-decoration: @link-hover-decoration;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus {
    background-color: @link-color;
}

.nav-pills > li.active > a:hover {
    background-color: @link-hover-color;
}

.progress-bar {
    background-color: @progress-bar-bg;
}

body {
    font-family: @font-family-base;
    background-color: @body-bg;
}

code, pre, kbd {
    font-family: @font-family-monospace;
}

//
// Buttons
// --------------------------------------------------

// Mixin for generating btn styles
.btn-styles(@btn-color; @btn-border; @btn-text) {

    display:inline-block;
    padding:0.5rem 1rem;
    font-family: @font-family-btn;

    border: solid 1px  @btn-border;
    border-radius:3px;

    text-decoration: none;

    background-color: @btn-color;
    color: @btn-text;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: @btn-color;
        border-color: darken(@btn-border, 12%);
        color: @btn-text;
        text-decoration:none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: darken(@btn-color, 12%);
        }
    }
}

// Apply the mixin to the buttons
.btn-default, .btn, button {
    .btn-styles(@btn-default-bg, @btn-default-border, @btn-default-color);
}

.btn-primary {
    .btn-styles(@btn-primary-bg, @btn-primary-border, @btn-primary-color);
}

.btn-success {
    .btn-styles(@btn-success-bg, @btn-success-border, @btn-success-color);
}

.btn-info {
    .btn-styles(@btn-info-bg, @btn-info-border, @btn-info-color);
}

.btn-warning {
    .btn-styles(@btn-warning-bg, @btn-warning-border, @btn-warning-color);
}

.btn-danger {
    .btn-styles(@btn-danger-bg, @btn-danger-border, @btn-danger-color);
}

.btn-ghost {
    .btn-styles(@btn-ghost-bg, @btn-ghost-border, @btn-ghost-color);
}

//
// Images
// --------------------------------------------------

.thumbnail,
.img-thumbnail {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

//
// Dropdowns
// --------------------------------------------------

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
    background-color: darken(@dropdown-link-hover-bg, 5%);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    background-color: darken(@dropdown-link-active-bg, 5%);
}

// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
    .navbar .navbar-nav .open .dropdown-menu > .active > a {
        &,
        &:hover,
        &:focus {
            color: #fff;
            #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
        }
    }
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
    border: none;
}

// Mixin for generating new styles
.alert-styles(@color; @text-color; @border-color) {
    background-color: @color;
    color: @text-color;
    border-radius: 3px;
}

// Apply the mixin to the alerts
.alert-success {
    .alert-styles(@alert-success-bg, @alert-success-text, @alert-success-border);
}

.alert-info {
    .alert-styles(@alert-info-bg, @alert-info-text, @alert-info-border);
}

.alert-warning {
    .alert-styles(@alert-warning-bg, @alert-warning-text, @alert-warning-border);
}

.alert-danger {
    .alert-styles(@alert-danger-bg, @alert-danger-text, @alert-danger-border);
}

//
// Progress bars
// --------------------------------------------------

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

// Mixin for generating new styles
.progress-bar-styles(@color) {
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

// Apply the mixin to the progress bars
.progress-bar {
    .progress-bar-styles(@progress-bar-bg);
}

.progress-bar-success {
    .progress-bar-styles(@progress-bar-success-bg);
}

.progress-bar-info {
    .progress-bar-styles(@progress-bar-info-bg);
}

.progress-bar-warning {
    .progress-bar-styles(@progress-bar-warning-bg);
}

.progress-bar-danger {
    .progress-bar-styles(@progress-bar-danger-bg);
}

// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
    #gradient > .striped();
}

//
// List groups
// --------------------------------------------------

.list-group {
    border-radius: @border-radius-base;
    .box-shadow(0 1px 2px rgba(0, 0, 0, .075));
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
    #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
    border-color: darken(@list-group-active-border, 7.5%);

    .badge {
        text-shadow: none;
    }
}

//
// Panels
// --------------------------------------------------

// Common styles
.panel {
    .box-shadow(0 1px 2px rgba(0, 0, 0, .05));
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
    background-color: @color;
    #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
    color: white;
    border: inherit;
}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading {
    .panel-heading-styles(@panel-default-heading-bg);
}

.panel-primary > .panel-heading {
    .panel-heading-styles(@panel-primary-heading-bg);
}

.panel-success > .panel-heading {
    .panel-heading-styles(@panel-success-heading-bg);
}

.panel-info > .panel-heading {
    .panel-heading-styles(@panel-info-heading-bg);
}

.panel-warning > .panel-heading {
    .panel-heading-styles(@panel-warning-heading-bg);
}

.panel-danger > .panel-heading {
    .panel-heading-styles(@panel-danger-heading-bg);
}

// Fix all the hardcoded borders set in bootstrap.css
.panel-default {
    border-color: @panel-default-border;
}

.panel-primary {
    border-color: @panel-primary-border;
}

.panel-success {
    border-color: @panel-success-border;
}

.panel-info {
    border-color: @panel-info-border;
}

.panel-warning {
    border-color: @panel-warning-border;
}

.panel-danger {
    border-color: @panel-danger-border;
}

//
// Wells
// --------------------------------------------------

.well {
    #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
    border-color: darken(@well-bg, 10%);
    @shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
    .box-shadow(@shadow);
}

//
// Tables
// --------------------------------------------------

table {
    width: 100%;
}

thead tr:last-child {
    border-bottom: solid 1px;
    th {
        padding-bottom: 1.5rem;
    }
}

tbody tr:first-child td {
    padding-top: 1rem;
}

th {
    font-family: @font-family-headings;
    font-weight: normal;
}

td, th {
    padding: 0.5em 0;
    text-align: left;
}

th:first-child,
td:first-child {
    padding-left: 1em;
}

//
// Code / Logs
// --------------------------------------------------

code {
    background-color: @pre-bg;
    color: @pre-color;
    font-family: @font-family-monospace;
    width: 100%;
    min-height: 12px;
    white-space: normal;
    border: 1px solid @pre-border-color;
    border-radius: 4px;
    position: relative;
    counter-reset: line-numbering;
    overflow-x: auto;
    font-size: 1.1rem;
}
code p:hover{
    background-color: @pre-color-hover;
}
code p {
  margin: 0;
}
code p::nth-line {
  color: yellow !important;
}
code a {
    margin: 0;
    padding: 0 15px 0 20px;
    word-wrap:break-word;
    display: inline;
    color: @pre-color;
}
code a:hover {
    color: @pre-color;
    text-decoration: none;
}

code p a::before {
    opacity: 0.4;
    content: counter(line-numbering);
    counter-increment: line-numbering;
    float: left;
    min-width: 20px;
    white-space: nowrap;
    padding-right: 1em;
    padding-left:10px;
    text-align: right;
}

code.block {
    background-color: @pre-bg;
    color: @pre-color;
    display: block;
    padding: 0.5rem;
    white-space: pre;
    //max-height: @pre-scrollable-max-height;
    border: solid 1px darken(@pre-bg, 20%);;
}

code.inline {
    display: inline-block;
    padding: inherit;
    white-space: pre-wrap;
}

//
// Mono Icons
// --------------------------------------------------

.material-icons {
    color: @brand-primary;
}

.material-icons.selected {
    color: @brand-warning;
}

//
// Layout elements
// --------------------------------------------------

.content-width {
    min-width: 70rem;
    margin-left: 100px;
    margin-right: 100px;

    @media screen and (max-width: 1000px) {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.global-header {
    font-size: 1.8rem;
    background-color: @header-bg;
    color: white;
}

.global-header a {
    color: white;
}

.global-header nav {
    text-align: center;
    padding: 2rem 0;
}

.global-header nav a {
    color: white;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-family: @font-family-nav;
    letter-spacing: 1.12px;
}

.global-header a:hover {
    color: black;
}

.sub-header {
    background-color: @sub-header-bg;
    color: @text-color;
    padding: 0;
}

.sub-header nav.page-title {
    .content-width;
    display: flex;
    height: 8.2rem;
    align-items: center;

    // Put some spacing between children
    > * {
        margin-right: 1rem;

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

.sub-header nav.page-tabs {
    .content-width;
}

.page-tabs a {
    color: @text-color;
    display: inline-block;
    padding: 0.6rem 1rem 0;
    height: 33px;
    font-family: @font-family-nav;
    text-decoration: none;

    // For transforming underline
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    margin-bottom: -3px;
}

.page-tabs a:before {
    // For transforming underline
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    background: @brand-primary;
    height: 3px;
    transition-timing-function: ease-out;
    transition-duration: 0.2s;
    transform: translateY(3px);
    transition-property: transform;
}

.page-tabs a.selected:before,
.page-tabs:hover a.selected:hover:before,
.page-tabs a:hover:before {
    // For transforming underline
    transform: translateY(0);
}

.page-tabs:hover a.selected:before {
    // For transforming underline
    transform: translateY(3px);
}

main article {
    .content-width;
    padding: 1rem 0;
}

.container-fluid {
    padding: 0;
}

footer {
    text-align: center;
    margin: 1em;
}

// Modal css
.overlayStyles {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    zIndex: 99;
    background-color: rgba(0,0,0,0.3);
}

.dialog {
    width: 100%;
    display: block;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    border-radius: 2px;
    z-index: 100;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

.dialog .header {
    padding: 25px 20px 25px 50px;
    color: #ffffff;
    font-weight: normal;
    line-height: 20px;
    overflow-y: auto;
    max-height: 20%;
    min-height: 5%;
}
.dialog section h4 {
    padding-bottom: 5px;
}

.dialog section .times {
    padding-left: 40px;
}

.dialog section .commons {
    position: relative;
    top: -5px;
}

.dialog section .times span {
  vertical-align: top;
}

.dialog section .times svg{
    padding-right: 25px;
}

.dialog section.left svg{
    padding-right: 20px;
    padding-left: 20px;
    margin-top: -20px;
}

.dialog .table {
    display: table;
}

.dialog .result {
    width: 100%;
    margin: 20px auto;
    font-family: @font-family-panel;
    color: #ffffff;
}

.dialog .result .row {
    display: table-row;
}

.dialog .result .row div {
    display: table-cell;
}

.dialog .result .row div div {
    display: block;
}

.dialog .header.info{
    background-color: @header-bg;
}

.dialog .header.success{
    padding: 0;
    background-color: @brand-success;
}

.dialog .header.failure{
    padding: 0;
    background-color: @brand-danger;
}

.dialog .content {
    background-color: @modal-content-bg;
    color: #000;
    overflow-y: auto;
    max-height: 90%;
    min-height: 75%;
    padding: 25px 20px 25px 50px;
}

.header .title {
    margin-top: 0
}

.header .closeButton {
    cursor: pointer;
    position: absolute;
    font-size: 3em;
    color: #ffffff;
    right: 25px;
    top: 25px
}
.spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
circle.success {
    fill: @brand-success;
}
circle.failure {
    fill: @brand-danger;
}
.left {
    float: left;
}
.right {
    float: right;
}


Tweaking the CSS in the site.

Tweaking the CSS in the site.

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


styling af personalzed lightbox

styling af personalzed lightbox

fatal: unable to access 'https://github.com/Det-Kongelige-Bibliotek/rex.git/': The requested URL returned error: 403


faneblade under resultTile samt fullRecord r stylet med et active state

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'