Delete 2x.less

Delete 2x.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/roxdubois/roxdubois.github.io.git/'


don't let widget labels wrap (bug 678242)

@import 'lib';

#addon {
    font-size: 1.2em;
    font-family: @sans-stack;
    position: relative;
    padding: 20px 20px 20px 104px;
    .icon {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0 12px 1em 0;
    }
    h1 {
        padding-right: 54px;
    }
    .install {
        display: inline-block;
        margin-right: 1em;
    }
    .extra {
        margin-top: 8px;
    }
    .notavail {
        font-family: @sans-stack;
        font-size: 12px;
        line-height: 12px;
        padding: 1px 0 1px 18px;
        margin-right: 14px;  /* Match the padding of .install. */
        background: url(../../img/impala/no.png) 0 30% no-repeat;
        white-space: nowrap;
    }
    .badge {
        font-size: 14px;
        margin-right: 1em;
    }
}
.html-rtl #addon {
    padding: 20px 104px 20px 20px;
    .icon {
        left: auto;
        right: 20px;
        margin: 0 0 1em 12px;
    }
    h1 {
        padding-right: 0;
        padding-left: 54px;
    }
    .notavail {
        padding: 1px 18px 1 0;
        margin-right: 0;
        margin-left: 14px;
    }
}

.version-number {
    color: #999;
    font-size: .8em;
}

.notice {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #D7E1ED inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid #CCD6E3;
    padding: 14px 14px 14px 104px;
    background: #E3EDFA;
    margin-bottom: 1em;
    h3 {
        font-style: italic;
        font-size: 16px;
    }
    p {
        margin-top: .5em;
    }
    b {
        color: #333;
    }
}

.notice.author {
    min-height: 64px;
    position: relative;
    .aux {
        float: right;
        margin-left: 7px;
        text-align: center;
        p {
            font-size: 11px;
        }
    }
    .continue {
        display: block;
        margin-top: .25em;
    }
    .avatar {
        height: 64px;
        width: 64px;
        position: absolute;
        left: 20px;
        top: 1em;
    }
    #contribute-box {
        display: none;
    }
}

.notice.performance-note {
    background: url("../../img/impala/turtle.png") no-repeat 28px 16px #FFF8DC;
    border-color: #e2dbbf;
    .box-shadow(0 -1px 0 #F7F0D5 inset, 0 1px 0 rgba(0, 0, 0, 0.05));
}

.addon-vitals {
    .stars {
        margin: 0 0 4px;
    }
    font-size: 16px;
    line-height: 1.4em;
    .widgets {
        margin: 23px 0 8px;
        font-size: 14px;
        .widget {
            color: #999;
            display: block;
        }
    }
    .stats {
        padding-right: 20px;
        b {
            color: #333;
        }
        color: @medium-gray;
        background: url("../../img/impala/stats.png") no-repeat right top;
        &:hover {
            color: @link;
            background-position: right -20px;
        }
    }
}

.gutter aside {
    color: @medium-gray;
    padding-top: 1em;
}

.addon-reviews > div {
    margin-bottom: 1em;
    font-size: 14px;
}

.widget {
    padding-left: 21px;
    background: url(../../img/impala/widgets.png) no-repeat 0 4px;
    white-space: nowrap;
    &:hover {
        color: @link;
    }
    &.favorite {
        &.faved {
            .sprite-pos(2, 20, 4px);
        }
        &:hover {
            .sprite-pos(1, 20, 4px);
        }
    }
    &.collection-add {
        .sprite-pos(3, 20, 4px);
        &:hover {
            .sprite-pos(4, 20, 4px);
        }
    }
    &.share {
        .sprite-pos(5, 20, 4px);
        &:hover {
            .sprite-pos(6, 20, 4px);
        }
    }
    &.ajax-loading {
        background: url(../../img/zamboni/loading-white.gif) no-repeat 0 2px !important;
    }
}
.html-rtl {
    .widget {
        padding-right: 21px;
        padding-left: 0;
        background-position: right 4px;
        &.favorite {
            &.faved {
                .sprite-pos-right(2, 20, 4px);
            }
            &:hover {
                .sprite-pos-right(1, 20, 4px);
            }
        }
        &.collection-add {
            .sprite-pos-right(3, 20, 4px);
            &:hover {
                .sprite-pos-right(4, 20, 4px);
            }
        }
        &.share {
            .sprite-pos-right(5, 20, 4px);
            &:hover {
                .sprite-pos-right(6, 20, 4px);
            }
        }
        &.ajax-loading {
            background-position: right 2px;
        }
    }
}

.previews {
    background: -moz-radial-gradient(top,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-radial-gradient(bottom,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-linear-gradient(left,
                                     #F4F8FC,
                                     rgba(255,255,255,0),
                                     #F4F8FC),
                -moz-linear-gradient(top,
                                     rgba(255,255,255,0),
                                     #F4F8FC 50px,
                                     #F4F8FC 180px,
                                     rgba(255,255,255,0));
    background-size: 100% 5px, 100% 5px, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 bottom, 0 0, 0 0;
    overflow: hidden;
    clear: both;
    position: relative;
    margin: 2em 0;
    padding: 30px 5%;
    li a {
        display: block;
        margin: 0 auto;
        text-align: center;
        height: 150px;
        width: 200px;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .panel {
        width: 100% / 3;
        a {
            display: block;
            text-align: center;
        }
    }
    .control {
        &.next {
            background: -moz-linear-gradient(left, fadeOut(#fff, 100%), #fff 50%);
        }
        &.prev {
            background: -moz-linear-gradient(left, #fff 50%, fadeOut(#fff, 100%));
        }
    }
}

.previews, #lightbox {
    .control {
        display: block;
        position: absolute;
        height: 100%;
        width: 5%;
        text-decoration: none;
        font-size: 48px;
        font-family: @serif-stack;
        text-align: center;
        line-height: 200px;
        top: 0;
        z-index: 100;
        -moz-transition: .3s color;
        &.next {
            right: 0;
        }
        &.prev {
            left: 0;
        }
        &.disabled {
            color: #ccc;
        }
    }
}

.metadata {
    li {
        line-height: 1.4em;
        border: none;
        a {
            padding: 0;
            display: inline;
            line-height: 1;
        }
        a:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    .links {
        font-size: 14px;
        margin-bottom: 1em;
        li {
            margin-bottom: 4px;
        }
        a {
            padding-left: 18px;
        }
        .support, .home {
            background: url(../../img/impala/home.png) no-repeat left -18px;
        }
        .email {
            background: url(../../img/impala/email.png) no-repeat left -18px;
        }
        .support-gs {
            background: url(../../img/impala/getsatisfaction.png) no-repeat left -18px;
        }
    }
}
#tagbox {
    li, a {
        border: none;
        display: inline;
        padding: 0 1px 0 0;
        line-height: 1.2em;
    }
    li:not(:last-child):after {
        content: '\00B7';
    }
}

#privacy-policy {
    overflow: hidden;
    position: relative;
    padding: 1em;
    h1 {
        line-height: 25px;
    }
    .prose {
        height: 400px;
        padding: 1em 0 0;
        overflow: auto;
    }
}
.banner-box {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    pointer-events: none;
}
.banner {
    padding: 6px 60px;
    background: #489615;
    text-transform: uppercase;
    font: bold 13px serif;
    font-family: @sans-stack;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    .transform(translate(50%, -50%) rotate(45deg) translateY(55px));
}

.version {
    margin-top: .5em;
    ul {
        padding-left: 4px;
    }
    .install {
        display: inline-block;
        margin-bottom: 1em;
    }
}

.secondary .addon {
    hgroup {
        position: relative;
        padding-left: 40px;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
        }
        h1 {
            font: bold 16px/18px @serif-stack;
            text-transform: none;
            margin: 0 0 4px;
            padding: 0;
        }
        h4 {
            font-size: 12px;
            line-height: 14px;
        }
    }
}

span.no-restart,
span.featured {
    background-color: #e8933a;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font: bold 9px/11px Arial;
    margin-left: 4px;
    padding: 3px 6px;
    text-transform: uppercase;
    vertical-align: 3px;
}
span.featured {
    background-color: #093;
}

@import 'lib';

#addon {
    font-size: 1.2em;
    font-family: @sans-stack;
    position: relative;
    padding: 20px 20px 20px 104px;
    .icon {
        position: absolute;
        top: 20px;
        left: 20px;
        margin: 0 12px 1em 0;
    }
    h1 {
        padding-right: 54px;
    }
    .install {
        display: inline-block;
        margin-right: 1em;
    }
    .extra {
        margin-top: 8px;
    }
    .notavail {
        font-family: @sans-stack;
        font-size: 12px;
        line-height: 12px;
        padding: 1px 0 1px 18px;
        margin-right: 14px;  /* Match the padding of .install. */
        background: url(../../img/impala/no.png) 0 30% no-repeat;
        white-space: nowrap;
    }
    .badge {
        font-size: 14px;
        margin-right: 1em;
    }
}
.html-rtl #addon {
    padding: 20px 104px 20px 20px;
    .icon {
        left: auto;
        right: 20px;
        margin: 0 0 1em 12px;
    }
    h1 {
        padding-right: 0;
        padding-left: 54px;
    }
    .notavail {
        padding: 1px 18px 1 0;
        margin-right: 0;
        margin-left: 14px;
    }
}

.version-number {
    color: #999;
    font-size: .8em;
}

.notice {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #D7E1ED inset, 0 1px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid #CCD6E3;
    padding: 14px 14px 14px 104px;
    background: #E3EDFA;
    margin-bottom: 1em;
    h3 {
        font-style: italic;
        font-size: 16px;
    }
    p {
        margin-top: .5em;
    }
    b {
        color: #333;
    }
}

.notice.author {
    min-height: 64px;
    position: relative;
    .aux {
        float: right;
        margin-left: 7px;
        text-align: center;
        p {
            font-size: 11px;
        }
    }
    .continue {
        display: block;
        margin-top: .25em;
    }
    .avatar {
        height: 64px;
        width: 64px;
        position: absolute;
        left: 20px;
        top: 1em;
    }
    #contribute-box {
        display: none;
    }
}

.notice.performance-note {
    background: url("../../img/impala/turtle.png") no-repeat 28px 16px #FFF8DC;
    border-color: #e2dbbf;
    .box-shadow(0 -1px 0 #F7F0D5 inset, 0 1px 0 rgba(0, 0, 0, 0.05));
}

.addon-vitals {
    .stars {
        margin: 0 0 4px;
    }
    font-size: 16px;
    line-height: 1.4em;
    .widgets {
        margin: 23px 0 8px;
        font-size: 14px;
        .widget {
            color: #999;
            display: block;
        }
    }
    .stats {
        padding-right: 20px;
        b {
            color: #333;
        }
        color: @medium-gray;
        background: url("../../img/impala/stats.png") no-repeat right top;
        &:hover {
            color: @link;
            background-position: right -20px;
        }
    }
}

.gutter aside {
    color: @medium-gray;
    padding-top: 1em;
}

.addon-reviews > div {
    margin-bottom: 1em;
    font-size: 14px;
}

.widget {
    padding-left: 21px;
    background: url(../../img/impala/widgets.png) no-repeat 0 4px;
    &:hover {
        color: @link;
    }
    &.favorite {
        &.faved {
            .sprite-pos(2, 20, 4px);
        }
        &:hover {
            .sprite-pos(1, 20, 4px);
        }
    }
    &.collection-add {
        .sprite-pos(3, 20, 4px);
        &:hover {
            .sprite-pos(4, 20, 4px);
        }
    }
    &.share {
        .sprite-pos(5, 20, 4px);
        &:hover {
            .sprite-pos(6, 20, 4px);
        }
    }
    &.ajax-loading {
        background: url(../../img/zamboni/loading-white.gif) no-repeat 0 2px !important;
    }
}
.html-rtl {
    .widget {
        padding-right: 21px;
        padding-left: 0;
        background-position: right 4px;
        &.favorite {
            &.faved {
                .sprite-pos-right(2, 20, 4px);
            }
            &:hover {
                .sprite-pos-right(1, 20, 4px);
            }
        }
        &.collection-add {
            .sprite-pos-right(3, 20, 4px);
            &:hover {
                .sprite-pos-right(4, 20, 4px);
            }
        }
        &.share {
            .sprite-pos-right(5, 20, 4px);
            &:hover {
                .sprite-pos-right(6, 20, 4px);
            }
        }
        &.ajax-loading {
            background-position: right 2px;
        }
    }
}

.previews {
    background: -moz-radial-gradient(top,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-radial-gradient(bottom,
                                     ellipse farthest-side,
                                     rgba(16, 83, 130, 0.5),
                                     rgba(16, 83, 130, 0)),
                -moz-linear-gradient(left,
                                     #F4F8FC,
                                     rgba(255,255,255,0),
                                     #F4F8FC),
                -moz-linear-gradient(top,
                                     rgba(255,255,255,0),
                                     #F4F8FC 50px,
                                     #F4F8FC 180px,
                                     rgba(255,255,255,0));
    background-size: 100% 5px, 100% 5px, auto, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 0, 0 bottom, 0 0, 0 0;
    overflow: hidden;
    clear: both;
    position: relative;
    margin: 2em 0;
    padding: 30px 5%;
    li a {
        display: block;
        margin: 0 auto;
        text-align: center;
        height: 150px;
        width: 200px;
        background: #fff;
        padding: 5px;
        border: 1px solid #ccc;
        img {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .panel {
        width: 100% / 3;
        a {
            display: block;
            text-align: center;
        }
    }
    .control {
        &.next {
            background: -moz-linear-gradient(left, fadeOut(#fff, 100%), #fff 50%);
        }
        &.prev {
            background: -moz-linear-gradient(left, #fff 50%, fadeOut(#fff, 100%));
        }
    }
}

.previews, #lightbox {
    .control {
        display: block;
        position: absolute;
        height: 100%;
        width: 5%;
        text-decoration: none;
        font-size: 48px;
        font-family: @serif-stack;
        text-align: center;
        line-height: 200px;
        top: 0;
        z-index: 100;
        -moz-transition: .3s color;
        &.next {
            right: 0;
        }
        &.prev {
            left: 0;
        }
        &.disabled {
            color: #ccc;
        }
    }
}

.metadata {
    li {
        line-height: 1.4em;
        border: none;
        a {
            padding: 0;
            display: inline;
            line-height: 1;
        }
        a:hover {
            background: transparent;
            text-decoration: underline;
        }
    }
    .links {
        font-size: 14px;
        margin-bottom: 1em;
        li {
            margin-bottom: 4px;
        }
        a {
            padding-left: 18px;
        }
        .support, .home {
            background: url(../../img/impala/home.png) no-repeat left -18px;
        }
        .email {
            background: url(../../img/impala/email.png) no-repeat left -18px;
        }
        .support-gs {
            background: url(../../img/impala/getsatisfaction.png) no-repeat left -18px;
        }
    }
}
#tagbox {
    li, a {
        border: none;
        display: inline;
        padding: 0 1px 0 0;
        line-height: 1.2em;
    }
    li:not(:last-child):after {
        content: '\00B7';
    }
}

#privacy-policy {
    overflow: hidden;
    position: relative;
    padding: 1em;
    h1 {
        line-height: 25px;
    }
    .prose {
        height: 400px;
        padding: 1em 0 0;
        overflow: auto;
    }
}
.banner-box {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    pointer-events: none;
}
.banner {
    padding: 6px 60px;
    background: #489615;
    text-transform: uppercase;
    font: bold 13px serif;
    font-family: @sans-stack;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 0px;
    .transform(translate(50%, -50%) rotate(45deg) translateY(55px));
}

.version {
    margin-top: .5em;
    ul {
        padding-left: 4px;
    }
    .install {
        display: inline-block;
        margin-bottom: 1em;
    }
}

.secondary .addon {
    hgroup {
        position: relative;
        padding-left: 40px;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
        }
        h1 {
            font: bold 16px/18px @serif-stack;
            text-transform: none;
            margin: 0 0 4px;
            padding: 0;
        }
        h4 {
            font-size: 12px;
            line-height: 14px;
        }
    }
}

span.no-restart,
span.featured {
    background-color: #e8933a;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    font: bold 9px/11px Arial;
    margin-left: 4px;
    padding: 3px 6px;
    text-transform: uppercase;
    vertical-align: 3px;
}
span.featured {
    background-color: #093;
}


Added styles for date-time picker

Added styles for date-time picker

.bootstrap-datetimepicker-widget {
  top: 0;
  left: 0;
  width: 250px;
  padding: 4px;
  margin-top: 1px;
  z-index: 99999 !important;
  border-radius: @border-radius-base;
  &.timepicker-sbs {
    width: 600px;
  }
  &.bottom {
    &:before {
      content: '';
      display: inline-block;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #ccc;
      border-bottom-color: rgba(0,0,0,.2);
      position: absolute;
      top: -7px;
      left: 7px;
    }
    &:after {
      content: '';
      display: inline-block;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid white;
      position: absolute;
      top: -6px;
      left: 8px;
    }
  }
  &.top {
    &:before {
      content: '';
      display: inline-block;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid #ccc;
      border-top-color: rgba(0,0,0,.2);
      position: absolute;
      bottom: -7px;
      left: 6px;
    }
    &:after {
      content: '';
      display: inline-block;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid white;
      position: absolute;
      bottom: -6px;
      left: 7px;
    }
  }
  & .dow {
    width: 14.2857%;
  }
  &.pull-right {
    &:before {
      left: auto;
      right: 6px;
    }
    &:after {
      left: auto;
      right: 7px;
    }
  }
  >ul {
    list-style-type: none;
    margin: 0;
  }
  a[data-action] {
    padding: 6px 0;
  }
  a[data-action]:active {
    box-shadow: none;
  }
  .timepicker-hour,
  .timepicker-minute,
  .timepicker-second {
    width: 54px;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0;
  }
  button[data-action] {
    padding: 6px;
  }
  table[data-hour-format="12"] .separator {
    width: 4px;
    padding: 0;
    margin: 0;
  }
  .datepicker > div {
    display: none;
  }
  .picker-switch {
    text-align: center;
  }
  table {
    width: 100%;
    margin: 0;
  }
  td,
  th {
    text-align: center;
    border-radius: @border-radius-base;
  }
  td {
    height: 54px;
    line-height: 54px;
    width: 54px;
    &.cw {
      font-size: 10px;
      height: 20px;
      line-height: 20px;
      color: @gray-light;
    }
    &.day {
      height: 20px;
      line-height: 20px;
      width: 20px;
    }
    &.day:hover,
    &.hour:hover,
    &.minute:hover,
    &.second:hover {
      background: @gray-lighter;
      cursor: pointer;
    }
    &.old,
    &.new {
      color: @gray-light;
    }
    &.today {
      position: relative;
      &:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-bottom: 7px solid @btn-primary-bg;
        border-top-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 4px;
        right: 4px;
      }
    }
    &.active,
    &.active:hover {
      background-color: @btn-primary-bg;
      color: @btn-primary-color;
      text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    }
    &.active.today:before {
      border-bottom-color: #fff;
    }
    &.disabled,
    &.disabled:hover {
      background: none;
      color: @gray-light;
      cursor: not-allowed;
    }
    span {
      display: inline-block;
      width: 54px;
      height: 54px;
      line-height: 54px;
      margin: 2px 1.5px;
      cursor: pointer;
      border-radius: @border-radius-base;
      &:hover {
        background: @gray-lighter;
      }
      &.active {
        background-color: @btn-primary-bg;
        color: @btn-primary-color;
        text-shadow: 0 -1px 0 rgba(0,0,0,.25);
      }
      &.old {
        color: @gray-light;
      }
      &.disabled,
      &.disabled:hover {
        background: none;
        color: @gray-light;
        cursor: not-allowed;
      }
    }
  }
  th {
    height: 20px;
    line-height: 20px;
    width: 20px;
    &.picker-switch {
      width: 145px;
    }
    &.next,
    &.prev {
      font-size: @font-size-base * 1.5;
    }
    &.disabled,
    &.disabled:hover {
      background: none;
      color: @gray-light;
      cursor: not-allowed;
    }
  }
  thead tr:first-child th {
    cursor: pointer;
    &:hover {
      background: @gray-lighter;
    }
  }
}
.input-group {
  &.date {
    .input-group-addon span {
      display: block;
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
  }
}
.bootstrap-datetimepicker-widget.left-oriented {
  &:before {
    left: auto;
    right: 6px;
  }
  &:after {
    left: auto;
    right: 7px;
  }
}
.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td {
  padding: 0 !important;
}
@media screen and (max-width: 767px) {
  .bootstrap-datetimepicker-widget.timepicker-sbs {
    width: 283px;
  }
}

error: pathspec 'src/styles/bootstrap_extra/datetimepicker.less' did not match any file(s) known to git


Customize style for search filters

Customize style for search filters

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/kyfr59/atom-cg35.git/'


Fix IE disabled button elements still having mouse events that were being delegated by flight (#412)

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


Switch to custom cursor

Switch to custom cursor

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


OR-554 Fix user notification layout

OR-554 Fix user notification layout

* User notification use all the height.
* Reduce `padding-top` and `padding-bottom`.

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/'


Fixes logo width

Fixes logo width

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/studiomotio/www1.git/'


Created file for universal attributes

Created file for universal attributes

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/rodrigoargumedo/Bootsharp.git/'


fix(project-list): always show scrollbar

closes https://github.com/monterey-framework/monterey/issues/188

.project-list-item {
  list-style-type: none;
  border: 3px solid #dfdfe1;
  project {
    display: block;
    padding: 5px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);

    .title {
      color: black;
      line-height: 50px;
      margin: 0;
    }

    &.selected:hover, &.selected {
      background-image: linear-gradient(-270deg,rgba(255,255,255,.5) 100%,rgba(255,255,255,0) 100%);

      .title {
        color: #EC2685;
      }
    }
  }
}

.main {
  display: flex;
  height: 100%;

  .left {
    position: relative;
    background-color: #ECECED;
    flex: 0 0 auto;
    z-index: 5;
    width: 300px;
    overflow: hidden;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);

    .main-button-group {
      height: 44px;
      width: 100%;
      display: flex;

      .main-button {
        display: block;
        height: 100%;
        width: 33.33%;
        background: #FFF;
        color: #70519E;
        border: 0;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        white-space: nowrap;
        border-left: 1px solid rgb(230, 230, 230);
      }

      .main-button:active, .main-button:hover {
        color: #FFF;
        background-image: -webkit-radial-gradient(49% 0 circle, #C632AC 0, #8A2979 100%);
        background-image: radial-gradient(circle at 49% 0, #C632AC 0, #8A2979 100%);
      }
    }

    .projectList {
      position: absolute;
      bottom: @taskbarHeight;
      top: 100px;
      left: 0;
      right: 0;
      .vGrid {
        background-color: transparent !important;
        border: 0 !important;

        .vGrid-body {
          overflow: scroll !important;
        }

        .vGrid-header {
          overflow-y: hidden !important;

          .vgrid-header-input-search-icon {
            position: absolute;
            top: 49px;
            left: 5px;
          }

          .vgrid-header-input-bottom {
            padding: 15px 28px;
            outline: 0 !important;
          }
        }

        .vGrid-row {
          color: #777;
          font-size: 18px;
          letter-spacing: .4px;
          background-color: #ECECED !important;
        }

        .vGrid-row-selected {
          color: #EC2685;
          background-color: #f7f7f7 !important;
        }
      }
    }

    .project-list-header {
      background-color: #dfdfe1;
      color: #70509D;
      max-height: 36px;
      min-height: 36px;
      text-align: center;
      font-weight: 400;

      .vGrid-glyphicon-sort-asc {
        right: 15px;
      }
      .vGrid-glyphicon-sort-desc {
        right: 15px;
      }
    }

    h1 {
      margin-top: 0;
      padding-top: 20px;
    }
  }

  .right {
    flex: 1 1 auto;
    overflow: auto;

    &.plugin-view-active {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: @taskbarHeight;
    }

    .title {
      margin-left: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    .project-title-plugin {
      text-transform: capitalize;
    }

    .returnToPluginListBtn{
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
    }

    tiles {
      padding-left: 20px;
      display: block;
    }
  }
}

.project-list-item {
  list-style-type: none;
  border: 3px solid #dfdfe1;
  project {
    display: block;
    padding: 5px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);

    .title {
      color: black;
      line-height: 50px;
      margin: 0;
    }

    &.selected:hover, &.selected {
      background-image: linear-gradient(-270deg,rgba(255,255,255,.5) 100%,rgba(255,255,255,0) 100%);

      .title {
        color: #EC2685;
      }
    }
  }
}

.main {
  display: flex;
  height: 100%;

  .left {
    position: relative;
    background-color: #ECECED;
    flex: 0 0 auto;
    z-index: 5;
    width: 300px;
    overflow: hidden;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);

    .main-button-group {
      height: 44px;
      width: 100%;
      display: flex;

      .main-button {
        display: block;
        height: 100%;
        width: 33.33%;
        background: #FFF;
        color: #70519E;
        border: 0;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        white-space: nowrap;
        border-left: 1px solid rgb(230, 230, 230);
      }

      .main-button:active, .main-button:hover {
        color: #FFF;
        background-image: -webkit-radial-gradient(49% 0 circle, #C632AC 0, #8A2979 100%);
        background-image: radial-gradient(circle at 49% 0, #C632AC 0, #8A2979 100%);
      }
    }

    .projectList {
      position: absolute;
      bottom: @taskbarHeight;
      top: 100px;
      left: 0;
      right: 0;
      .vGrid {
        background-color: transparent !important;
        border: 0 !important;

        .vGrid-header {
          overflow-y: hidden !important;

          .vgrid-header-input-search-icon {
            position: absolute;
            top: 49px;
            left: 5px;
          }

          .vgrid-header-input-bottom {
            padding: 15px 28px;
            outline: 0 !important;
          }
        }

        .vGrid-row {
          color: #777;
          font-size: 18px;
          letter-spacing: .4px;
          background-color: #ECECED !important;
        }

        .vGrid-row-selected {
          color: #EC2685;
          background-color: #f7f7f7 !important;
        }
      }
    }

    .project-list-header {
      background-color: #dfdfe1;
      color: #70509D;
      max-height: 36px;
      min-height: 36px;
      text-align: center;
      font-weight: 400;

      .vGrid-glyphicon-sort-asc {
        right: 15px;
      }
      .vGrid-glyphicon-sort-desc {
        right: 15px;
      }
    }

    h1 {
      margin-top: 0;
      padding-top: 20px;
    }
  }

  .right {
    flex: 1 1 auto;
    overflow: auto;

    &.plugin-view-active {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: @taskbarHeight;
    }

    .title {
      margin-left: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    .project-title-plugin {
      text-transform: capitalize;
    }

    .returnToPluginListBtn{
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
    }

    tiles {
      padding-left: 20px;
      display: block;
    }
  }
}


Added gridmanager-font-awesome.less

Added gridmanager-font-awesome.less

/* Font Awesome Integration for Grid Editor
 * (min. Version 4.0)
 */
.ge-canvas.ge-editing .ge-tools-drawer > a {
	padding: 3px 5px;
}
.ge-canvas .glyphicon,
.ge-mainControls .glyphicon {
	top: 0;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ge-canvas .glyphicon-move:before {
	content: "\f047";
}
.ge-canvas .glyphicon-minus:before {
	content: "\f147";
}
.ge-canvas .glyphicon-plus:before {
	content: "\f196";
}
.ge-canvas .glyphicon-cog:before {
	content: "\f013";
}
.ge-canvas .glyphicon-trash:before {
	content: "\f014";
}
.ge-canvas .glyphicon-plus-sign:before,
.ge-mainControls .glyphicon-plus-sign:before {
	content: "\f055";
}
.ge-mainControls .glyphicon-eye-open:before {
	content: "\f06e";
}
.ge-mainControls .glyphicon-chevron-left:before {
	content: "\f121";
}
.ge-mainControls .glyphicon-chevron-right {
	display: none;
}

error: pathspec 'src/less/grideditor-font-awesome.less' did not match any file(s) known to git


removed horizontal scroll

removed horizontal scroll

// @import url(src/css/core/global.less);

youtube-videos {
	display: block;
}
.youtube-videos {

	.navbar {
	    position: fixed;
	    z-index: 1010;
	    right: 0;
	    top: 0;
	    border-bottom-color: #ccc;
	    border-radius: 0;
        transition: width .3s ease-out;
	}

	.form-search .form-group {

		ul.ng-hide {
			transition: all 0.3s ease-out;
			display: block !important;
		    transform: translateY(-7rem);
		}
	}

	.sidebar-toggle {
	    margin-left: -1rem;
	    display: none;
	}
}
.drawer-closed .youtube-videos {
	.navbar {
		width: 100%;
	}

	.sidebar-toggle.visible-xs-inline-block {
		display: block !important;
	}
}

@media (min-width: 320px) {
	.youtube-videos {
		padding-top: 10rem;
		margin-left: 1rem;
		position: relative;

		.navbar {
			.sidebar-toggle {
				padding: 1rem 1rem;
			}
		}
	}
}

@media (min-width: 768px) {
	.youtube-videos {

		.videos-list {
			padding-left: 0;
		}
		.navbar {
		    width: ~"calc(100% - 29.6rem)";
		    padding: 0 15px;
		}
	}
}
// @media (min-width: 768px) and (orientation: landscape){
// 	.youtube-videos {
// 		.navbar {
// 			width: 100%;
// 		}
// 	}
// }

@media (min-width: 960px) {
	.youtube-videos {

		.videos-list {
			padding-left: 1rem;
		}
	}
}

// @import url(src/css/core/global.less);

youtube-videos {
	display: block;
}
.youtube-videos {

	.navbar {
	    position: fixed;
	    z-index: 1010;
	    right: 0;
	    top: 0;
	    border-bottom-color: #ccc;
	    border-radius: 0;
        transition: width .3s ease-out;
	}

	.form-search .form-group {

		ul.ng-hide {
			transition: all 0.3s ease-out;
			display: block !important;
		    transform: translateY(-7rem);
		}
	}

	.sidebar-toggle {
	    margin-left: -1rem;
	    display: none;
	}
}
.drawer-closed .youtube-videos {
	.navbar {
		width: 100%;
	}

	.sidebar-toggle.visible-xs-inline-block {
		display: block !important;
	}
}

@media (min-width: 320px) {
	.youtube-videos {
		padding-top: 10rem;
		left: 1rem;
		position: relative;

		.navbar {
			.sidebar-toggle {
				padding: 1rem 1rem;
			}
		}
	}
}

@media (min-width: 768px) {
	.youtube-videos {

		.videos-list {
			padding-left: 0;
		}
		.navbar {
		    width: ~"calc(100% - 29.6rem)";
		    padding: 0 15px;
		}
	}
}
// @media (min-width: 768px) and (orientation: landscape){
// 	.youtube-videos {
// 		.navbar {
// 			width: 100%;
// 		}
// 	}
// }

@media (min-width: 960px) {
	.youtube-videos {

		.videos-list {
			padding-left: 1rem;
		}
	}
}


Colors for labels and modal buttons

Colors for labels and modal buttons

@import url('_mixins.less');
@import url('_colors-vars.less');
/*==========================
Framework7 Color Themes
==========================*/
.theme-mixin(@colorName, @color, @pressColor) {
    //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
    .button {
        .theme-@{colorName} & {
            &:not(.button-fill) {
                color:@color;
            }
        }
        &.color-@{colorName}:not(.button-fill), .color-@{colorName}.buttons-row &:not(.button-fill) {
            color: @color !important;
        }
        .theme-@{colorName} &.button-fill {
            background: @color;
            color:#fff;
            html:not(.watch-active-state) &:active, &.active-state {
                background: @pressColor;
            }
        }
        &.button-fill.bg-@{colorName}, &.button-fill.color-@{colorName} {
            background: @color !important;
            color:#fff;
            html:not(.watch-active-state) &:active, &.active-state {
                background: @pressColor !important;
            }
        }

    }
    //Icons
    .color-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    i.icon-next.color-@{colorName}, i.icon-next.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{color}' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
    i.icon-prev.color-@{colorName}, i.icon-prev.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{color}' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
    i.icon-back.color-@{colorName}, i.icon-back.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='@{color}'/></svg>");
    }
    i.icon-forward.color-@{colorName}, i.icon-forward.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='@{color}'/></svg>");
    }
    i.icon-bars.color-@{colorName}, i.icon-bars.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='@{color}'/></svg>");
    }
    // Preloader
    .preloader.color-@{colorName}, .preloader.preloader-@{colorName} {
        svg circle {
            stroke: @color;
        }
    }
    // Theme
    .theme-@{colorName} {
        a {
            color: @color;
        }
        .navbar, .navbar& , .toolbar, .toolbar&, .subnavbar, .subnavbar& {
            background-color: @color;
        }
        .range-slider, .range-slider& {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
            input[type="range"]::-webkit-slider-thumb {
                background-color: @color;
            }
        }
        .label-switch, .label-switch& {
            input[type="checkbox"] {
                &:checked {
                    &+ .checkbox {
                        background-color: rgba(red(@color), green(@color), blue(@color), 0.5);
                        &:after {
                            background-color: @color;
                        }
                    }
                }
            }
        }
        label.label-checkbox, label.label-checkbox& {
            cursor: pointer;
            i.icon-form-checkbox {
                &:after {
                    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
                }
            }
            input[type="checkbox"], input[type="radio"] {
                &:checked + .item-media, &:checked ~ .item-after, &:checked ~ .item-inner{
                    i.icon-form-checkbox {
                        border-color: @color;
                        background-color: @color;
                    }
                }
            }
        }
        label.label-radio, label.label-radio& {
            i.icon-form-radio:after {
                background-color: @color;
            }
            input[type="checkbox"], input[type="radio"] {
                &:checked + .item-media, &:checked ~ .item-after, &:checked ~ .item-inner{
                    i.icon-form-radio {
                        border-color: @color;
                    }
                    i.icon-form-radio:after {
                        background-color: @color;
                    }
                }
            }
        }
        .focus-state {
            .label, .floating-label {
                color: @color;
            }
        }
        .item-input-field, .input-field {
            &.focus-state:after, &.not-empty-state:after {
                background: @color;
            }
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
        .modal-button {
            color: @color;
        }
    }
    .swiper-pagination {
        &.color-@{colorName}, .theme-@{colorName} & {
            .swiper-pagination-bullet-active {
                background-color: @color;
            }
        }
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        &.color-@{colorName}, .theme-@{colorName} & {
            .encoded-svg-background("<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='@{color}'/></svg>");
        }
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        &.color-@{colorName}, .theme-@{colorName} & {
            .encoded-svg-background("<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='@{color}'/></svg>");
        }
    }
    // Bg rule
    .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;
        .list-block &.item-inner, .list-block ul&, & {
            &:after, &:before {
                background-color: @color;
            }
        }
    }
}
.theme-mixin(e('red'), @red, #D32F2F);
.theme-mixin(e('pink'), @pink, #C2185B);
.theme-mixin(e('purple'), @purple, #7B1FA2);
.theme-mixin(e('deeppurple'), @deeppurple, #512DA8);
.theme-mixin(e('indigo'), @indigo, #303F9F);
.theme-mixin(e('blue'), @blue, #1976D2);
.theme-mixin(e('lightblue'), @lightblue, #0288D1);
.theme-mixin(e('cyan'), @cyan, #0097A7);
.theme-mixin(e('teal'), @teal, #00897B);
.theme-mixin(e('green'), @green, #388E3C);
.theme-mixin(e('lightgreen'), @lightgreen, #689F38);
.theme-mixin(e('lime'), @lime, #AFB42B);
.theme-mixin(e('yellow'), @yellow, #FBC02D);
.theme-mixin(e('amber'), @amber, #FFA000);
.theme-mixin(e('orange'), @orange, #F57C00);
.theme-mixin(e('deeporange'), @deeporange, #E64A19);
.theme-mixin(e('brown'), @brown, #5D4037);
.theme-mixin(e('gray'), @gray, #616161);
.theme-mixin(e('bluegray'), @bluegray, #455A64);
.theme-mixin(e('white'), @white, rgba(0,0,0,0.1));
.theme-mixin(e('black'), @black, #333);

/*==========================
Framework7 Layouts Themes
==========================*/
/* === Dark layout === */
.layout-dark {
    @pageBg: #222426;
    @barsBg: #131313;
    @barsBorder: #333;
    @barsText: #fff;
    @tabBarText: #fff;
    @text: #ddd;
    @lightText: #bbb;
    @strongText: #fff;
    @activeLink: #29292f;
    @blockBg: #1c1d1f;
    @blockBorder: #393939;
    @blockStrongBg: #1c1d1f;
    @dividerBg: #1a1a1a;
    @itemAfterText: @lightText;
    @searchbarBg: #333;
    @searchbarBorder: #333;
    @swipeoutButton: #444;
    @checkboxBorder: @blockBorder;

    // Photo Browser
    .page, .login-screen-content, .page&, .panel, .panel& {
        background-color: @pageBg;
        color:rgba(255,255,255,0.87);
    }
    .content-block-title {
        color:rgba(255,255,255,0.87);
    }
    .content-block, .content-block& {
        color: rgba(255,255,255,0.7);
    }
    .content-block-inner {
        background: @blockStrongBg;
        color:rgba(255,255,255,0.87);
        .hairline-color(top, @blockBorder);
        .hairline-color(bottom, @blockBorder);
    }
    .list-block, .list-block& {
        ul {
            background: @blockBg;
            .hairline-color(top, @blockBorder);
            .hairline-color(bottom, @blockBorder);
        }
        &.inset ul{
            background: @blockStrongBg;
        }
        &.notifications > ul {
            background: none;
        }
    }
    .popover .list-block ul {
        background: none;
    }
    .card {
        background: @blockBg;
    }
    .card-header{
        .hairline-color(bottom, @blockBorder);
    }
    .card-footer {
        .hairline-color(top, @blockBorder);
        color:@lightText;
    }

    li.sorting {
        background-color: @activeLink;
    }
    .swipeout-actions-left a, .swipeout-actions-right a {
        background-color: @swipeoutButton;
    }
    .item-inner, .list-block ul ul li:last-child .item-inner {
        .hairline-color(bottom, @blockBorder);
    }
    .item-after, .item-text {
        color: rgba(255,255,255,0.7);
    }
    .item-link, label.label-checkbox, label.label-radio {
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: @activeLink;
        }
    }
    .label-switch {
        .checkbox {
            background: rgba(255,255,255,0.3);
        }
    }
    label.label-checkbox {
        i.icon-form-checkbox {
            border-color: rgba(255,255,255,0.7);
        }
    }
    label.label-radio {
        i.icon-form-radio {
            border-color: rgba(255,255,255,0.7);
        }
    }
    .item-link.list-button {
        .hairline-color(bottom, @blockBorder);
    }
    .list-block-label {
        color:@lightText;
    }
    .item-divider, .list-group-title {
        background: @dividerBg;
        color:@lightText;
        .hairline-color(top, @blockBorder);
    }

    // Searchbar
    .searchbar {
        background: @searchbarBg;
        .hairline-color(bottom, @searchbarBorder);
    }

    // Forms
    .list-block, .list-block& {
        input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
            color:@strongText;
        }
    }
}

@import url('_mixins.less');
@import url('_colors-vars.less');
/*==========================
Framework7 Color Themes
==========================*/
.theme-mixin(@colorName, @color, @pressColor) {
    //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
    .button {
        .theme-@{colorName} & {
            &:not(.button-fill) {
                color:@color;
            }
        }
        &.color-@{colorName}:not(.button-fill), .color-@{colorName}.buttons-row &:not(.button-fill) {
            color: @color !important;
        }
        .theme-@{colorName} &.button-fill {
            background: @color;
            color:#fff;
            html:not(.watch-active-state) &:active, &.active-state {
                background: @pressColor;
            }
        }
        &.button-fill.bg-@{colorName}, &.button-fill.color-@{colorName} {
            background: @color !important;
            color:#fff;
            html:not(.watch-active-state) &:active, &.active-state {
                background: @pressColor !important;
            }
        }

    }
    //Icons
    .color-@{colorName} {
        i.icon, i.icon& {
            color:@color;
        }
    }
    i.icon-next.color-@{colorName}, i.icon-next.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{color}' width='24' height='24' viewBox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
    i.icon-prev.color-@{colorName}, i.icon-prev.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='@{color}' width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    }
    i.icon-back.color-@{colorName}, i.icon-back.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='@{color}'/></svg>");
    }
    i.icon-forward.color-@{colorName}, i.icon-forward.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z' fill='@{color}'/></svg>");
    }
    i.icon-bars.color-@{colorName}, i.icon-bars.theme-@{colorName} {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='@{color}'/></svg>");
    }
    // Preloader
    .preloader.color-@{colorName}, .preloader.preloader-@{colorName} {
        svg circle {
            stroke: @color;
        }
    }
    // Theme
    .theme-@{colorName} {
        a {
            color: @color;
        }
        .navbar, .navbar& , .toolbar, .toolbar&, .subnavbar, .subnavbar& {
            background-color: @color;
        }
        .range-slider, .range-slider& {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
            input[type="range"]::-webkit-slider-thumb {
                background-color: @color;
            }
        }
        .label-switch, .label-switch& {
            input[type="checkbox"] {
                &:checked {
                    &+ .checkbox {
                        background-color: rgba(red(@color), green(@color), blue(@color), 0.5);
                        &:after {
                            background-color: @color;
                        }
                    }
                }
            }
        }
        label.label-checkbox, label.label-checkbox& {
            cursor: pointer;
            i.icon-form-checkbox {
                &:after {
                    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='24' height='24' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
                }
            }
            input[type="checkbox"], input[type="radio"] {
                &:checked + .item-media, &:checked ~ .item-after, &:checked ~ .item-inner{
                    i.icon-form-checkbox {
                        border-color: @color;
                        background-color: @color;
                    }
                }
            }
        }
        label.label-radio, label.label-radio& {
            i.icon-form-radio:after {
                background-color: @color;
            }
            input[type="checkbox"], input[type="radio"] {
                &:checked + .item-media, &:checked ~ .item-after, &:checked ~ .item-inner{
                    i.icon-form-radio {
                        border-color: @color;
                    }
                    i.icon-form-radio:after {
                        background-color: @color;
                    }
                }
            }
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
    }
    .swiper-pagination {
        &.color-@{colorName}, .theme-@{colorName} & {
            .swiper-pagination-bullet-active {
                background-color: @color;
            }
        }
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        &.color-@{colorName}, .theme-@{colorName} & {
            .encoded-svg-background("<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='@{color}'/></svg>");
        }
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        &.color-@{colorName}, .theme-@{colorName} & {
            .encoded-svg-background("<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='@{color}'/></svg>");
        }
    }
    // Bg rule
    .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;
        .list-block &.item-inner, .list-block ul&, & {
            &:after, &:before {
                background-color: @color;
            }
        }
    }
}
.theme-mixin(e('red'), @red, #D32F2F);
.theme-mixin(e('pink'), @pink, #C2185B);
.theme-mixin(e('purple'), @purple, #7B1FA2);
.theme-mixin(e('deeppurple'), @deeppurple, #512DA8);
.theme-mixin(e('indigo'), @indigo, #303F9F);
.theme-mixin(e('blue'), @blue, #1976D2);
.theme-mixin(e('lightblue'), @lightblue, #0288D1);
.theme-mixin(e('cyan'), @cyan, #0097A7);
.theme-mixin(e('teal'), @teal, #00897B);
.theme-mixin(e('green'), @green, #388E3C);
.theme-mixin(e('lightgreen'), @lightgreen, #689F38);
.theme-mixin(e('lime'), @lime, #AFB42B);
.theme-mixin(e('yellow'), @yellow, #FBC02D);
.theme-mixin(e('amber'), @amber, #FFA000);
.theme-mixin(e('orange'), @orange, #F57C00);
.theme-mixin(e('deeporange'), @deeporange, #E64A19);
.theme-mixin(e('brown'), @brown, #5D4037);
.theme-mixin(e('gray'), @gray, #616161);
.theme-mixin(e('bluegray'), @bluegray, #455A64);
.theme-mixin(e('white'), @white, rgba(0,0,0,0.1));
.theme-mixin(e('black'), @black, #333);

/*==========================
Framework7 Layouts Themes
==========================*/
/* === Dark layout === */
.layout-dark {
    @pageBg: #222426;
    @barsBg: #131313;
    @barsBorder: #333;
    @barsText: #fff;
    @tabBarText: #fff;
    @text: #ddd;
    @lightText: #bbb;
    @strongText: #fff;
    @activeLink: #29292f;
    @blockBg: #1c1d1f;
    @blockBorder: #393939;
    @blockStrongBg: #1c1d1f;
    @dividerBg: #1a1a1a;
    @itemAfterText: @lightText;
    @searchbarBg: #333;
    @searchbarBorder: #333;
    @swipeoutButton: #444;
    @checkboxBorder: @blockBorder;

    // Photo Browser
    .page, .login-screen-content, .page&, .panel, .panel& {
        background-color: @pageBg;
        color:rgba(255,255,255,0.87);
    }
    .content-block-title {
        color:rgba(255,255,255,0.87);
    }
    .content-block, .content-block& {
        color: rgba(255,255,255,0.7);
    }
    .content-block-inner {
        background: @blockStrongBg;
        color:rgba(255,255,255,0.87);
        .hairline-color(top, @blockBorder);
        .hairline-color(bottom, @blockBorder);
    }
    .list-block, .list-block& {
        ul {
            background: @blockBg;
            .hairline-color(top, @blockBorder);
            .hairline-color(bottom, @blockBorder);
        }
        &.inset ul{
            background: @blockStrongBg;
        }
        &.notifications > ul {
            background: none;
        }
    }
    .popover .list-block ul {
        background: none;
    }
    .card {
        background: @blockBg;
    }
    .card-header{
        .hairline-color(bottom, @blockBorder);
    }
    .card-footer {
        .hairline-color(top, @blockBorder);
        color:@lightText;
    }

    li.sorting {
        background-color: @activeLink;
    }
    .swipeout-actions-left a, .swipeout-actions-right a {
        background-color: @swipeoutButton;
    }
    .item-inner, .list-block ul ul li:last-child .item-inner {
        .hairline-color(bottom, @blockBorder);
    }
    .item-after, .item-text {
        color: rgba(255,255,255,0.7);
    }
    .item-link, label.label-checkbox, label.label-radio {
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: @activeLink;
        }
    }
    .label-switch {
        .checkbox {
            background: rgba(255,255,255,0.3);
        }
    }
    label.label-checkbox {
        i.icon-form-checkbox {
            border-color: rgba(255,255,255,0.7);
        }
    }
    label.label-radio {
        i.icon-form-radio {
            border-color: rgba(255,255,255,0.7);
        }
    }
    .item-link.list-button {
        .hairline-color(bottom, @blockBorder);
    }
    .list-block-label {
        color:@lightText;
    }
    .item-divider, .list-group-title {
        background: @dividerBg;
        color:@lightText;
        .hairline-color(top, @blockBorder);
    }

    // Searchbar
    .searchbar {
        background: @searchbarBg;
        .hairline-color(bottom, @searchbarBorder);
    }

    // Forms
    .list-block, .list-block& {
        input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
            color:@strongText;
        }
    }
}