start of LESSification: copy CSS to LESS file

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE-mobile text size adjust after device orientation change,
 *    without disabling user zoom. Percentage value unsupported by Gecko.
 * 3. Set the background color to white for some obscure user-agents (like
 *    Pocket when in night mode).
 */

html {
  font-family: sans-serif; /* 1 */
  -moz-text-size-adjust: auto; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  background-color: #fff; /* 3 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 * 1. Take font-weigh value from parent element
 * 2. Set font-weight bolder that parent
 */

b,
strong {
  font-weight: inherit; /* 1 */
}

b,
strong {
  font-weight: bolder; /* 2 */
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
    top: -1ex;
}

sub {
    bottom: -0.5ex;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Address differences between Firefox and other browsers.
 * 2. Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

hr {
  -moz-box-sizing: content-box; /* 1 */
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers. Use `monospace`
 * twice for better gzipping.
 */

code,
kbd,
pre,
samp,
tt{
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Define consistent border, margin, and padding.
 * 2. Remove browser intrinsic min-width.
 */

fieldset {
  border: 1px solid #c0c0c0; /* 1 */
  margin: 0 2px; /* 1 */
  min-width: 0; /* 2 */
  padding: 0.35em 0.625em 0.75em; /* 1 */
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* ==========================================================================
   Editable Contents
   ========================================================================== */

/**
 * Remove outline when focused in Webkit-based and Blink-based browsers.
 * 1. Allow empty attribute syntax.
 */

[contenteditable=""]:focus, /* 1 */
[contenteditable="true"]:focus {
    outline: 0;
}

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


add microsoft vendor prefix for animations

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/Livefyre/livefyre-bootstrap.git/'


Added shimmer gradient percent calculations.

Also removed duplicate background declaration.

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.loading-shimmer-frames () {
  from {
    background-position-x: -100000px;
  }
  to {
    background-position-x: 100000px;
  }
}

@-webkit-keyframes loading_shimmer {.loading-shimmer-frames;}
@-moz-keyframes loading_shimmer {.loading-shimmer-frames;}
@-o-keyframes loading_shimmer {.loading-shimmer-frames;}
@keyframes loading_shimmer {.loading-shimmer-frames;}

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border-width: 0 0 1px 0;
  -moz-box-shadow: @site-box-shadow;
  -webkit-box-shadow: @site-box-shadow;
  box-shadow: @site-box-shadow;
  margin-left: -1000px;
  margin-right: -1000px;
  margin-top: -20px;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
    #preview {
      max-height: 200px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5.5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;
          min-height: 34px;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }

          .faded-edge {
            @box-shadow: inset 8px 0 8px 0px @section-header-bg;
            -webkit-box-shadow: @box-shadow;
            -moz-box-shadow: @box-shadow;
            box-shadow: @box-shadow;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          input[type=text] {
            border: none;
            background: none;
            padding: 0;
            padding-right: 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            outline: none;
            font-family: inherit;
            font-weight: inherit;
            text-indent: 10px;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px lighten(@color-grey-border, 8%);
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding * 2;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        #search-results-list {
          background-color: @color-grey-background;
          margin: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }

        #search-results-list .section-results-placeholder {
          color: darken(@color-grey-background, 40%);
          margin: 5px;
          font-size: 13px;
        }

        #search-results-list .section-header {
          position: relative;
          min-height: 24px;
          border-bottom: none;
          background-color: darken(@color-grey-background, 3%);
          border: solid 1px lighten(@color-grey-border, 10%);

          .loading-gradient, .content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
          }

          .loading-gradient {
            z-index: 99;

            @background: darken(@color-grey-background, 3%);
            @background-emphasis: lighten(@background, 10%);
            @background-emphasis-percent: 60%;

            @gradient-percent1: 50% - (@background-emphasis-percent / 2%);
            @gradient-percent2: 50%;
            @gradient-percent3: 50% + (@background-emphasis-percent / 2%);
            @gradient: left, @background @gradient-percent1, @background-emphasis @gradient-percent2, @background @gradient-percent3;
            background: -moz-linear-gradient(@gradient);
            background: -webkit-linear-gradient(@gradient);
            background: -o-linear-gradient(@gradient);
            background: -ms-linear-gradient(@gradient);
            background: linear-gradient(@gradient);
            background-size: 170%;

            @animation-def: loading_shimmer 800s linear 0s infinite;
            @animation-def: loading_shimmer 500s linear 0s infinite;
            -webkit-animation: @animation-def;
            -moz-animation: @animation-def;
            -o-animation: @animation-def;
            animation: @animation-def;

            opacity: 0;
            -webkit-transition: opacity 1s;
            transition: opacity 1s;

            text-align: right;
            font-size: 11px;
            padding: 3px 10px;
            color: darken(@color-grey-background, 30%);
            letter-spacing: 0.4px;
            font-weight: 300;
          }

          .content {
            font-size: 12px;
            font-weight: 400;
            padding: 3px 5px;
            z-index: 100;
          }
        }

        #search-results-list.loading .section-header {
          .loading-gradient {
            opacity: 1;
          }
        }

        #queue-list li, #search-results-list li.song {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          &:hover {
            .fg .controls {
              opacity: 1;
            }
          }

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;
            white-space: nowrap;

            .faded-edge {
              @box-shadow: inset -30px 0 24px -15px @color-grey-background;
              -webkit-box-shadow: @box-shadow;
              -moz-box-shadow: @box-shadow;
              box-shadow: @box-shadow;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
            }

            .controls {
              @transition: opacity .06s ease-in-out;
              transition: @transition;
              -moz-transition: @transition;
              -webkit-transition: @transition;
              z-index: 10;
              opacity: 0;
              position: absolute;
              top: 0;
              right: 0;
              padding-top: 1px;
              padding-right: 3px;

              a {
                text-decoration: none;
                color: darken(@color-grey-background, 50%);

                &:hover:not(.disabled) {
                  color: darken(@color-grey-background, 70%);
                }

                &.disabled {
                  color: darken(@color-grey-background, 30%);
                }
              }
            }

            .title, .artist, .album {
              white-space: nowrap;
            }

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing, &.highlighted {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }

              .faded-edge {
                @box-shadow: inset -30px 0 24px -15px @color-purple;
                -webkit-box-shadow: @box-shadow;
                -moz-box-shadow: @box-shadow;
                box-shadow: @box-shadow;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  cursor: default;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;
    position: relative;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      display: inline-block;
      color: lighten(@font-color, 20%);
    }

    .controls {
      text-align: right;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding-right: 5px;
      padding-top: 5px;

      &:empty {
        display: none;
      }

      a {
        text-decoration: none;
        font-size: 22px;
        color: darken(@color-grey-background, 50%);

        &:hover:not(.disabled) {
          color: darken(@color-grey-background, 70%);
        }

        &.disabled {
          color: darken(@color-grey-background, 30%);
        }
      }

      .btn-skip {
        font-size: 17px;
        position: relative;
        bottom: 3px;
      }
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.loading-shimmer-frames () {
  from {
    background-position-x: -100000px;
  }
  to {
    background-position-x: 100000px;
  }
}

@-webkit-keyframes loading_shimmer {.loading-shimmer-frames;}
@-moz-keyframes loading_shimmer {.loading-shimmer-frames;}
@-o-keyframes loading_shimmer {.loading-shimmer-frames;}
@keyframes loading_shimmer {.loading-shimmer-frames;}

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.room-alert {
  padding: 5px;
  text-align: center;
  border-radius: 0;
  border-width: 0 0 1px 0;
  -moz-box-shadow: @site-box-shadow;
  -webkit-box-shadow: @site-box-shadow;
  box-shadow: @site-box-shadow;
  margin-left: -1000px;
  margin-right: -1000px;
  margin-top: -20px;

  &:empty {
    display: none;
  }
}

.fixed-column {
  padding: 0;
  height: 850px;

  #previews, #dj-list {
    overflow: auto;
    max-height: 550px;
  }

  @height_iterations: 1000px;
  @height_difference: 180px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews, #dj-list {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
    #preview {
      max-height: 200px;
    }
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    background-color: @color-grey-background;
    border: solid 1px @color-grey-border;
    border-radius: @site-border-radius;
    -webkit-box-shadow: @site-box-shadow;
    box-shadow: @site-box-shadow;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        @section-header-bg: darken(@color-grey-background, 5.5%);
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 3%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        &.section-header {
          background-color: @section-header-bg;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: @section-header-bg;
          padding: 8px;
          position: relative;
          min-height: 34px;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover:not(.disabled) {
              color: darken(@color-grey-background, 70%);
            }

            &.disabled {
              color: darken(@color-grey-background, 30%);
            }
          }

          .error {
            color: darken(red, 10%);
            font-size: 12px;
            font-weight: bold;
            margin-top: 3px;
            display: none;
          }

          .faded-edge {
            @box-shadow: inset 8px 0 8px 0px @section-header-bg;
            -webkit-box-shadow: @box-shadow;
            -moz-box-shadow: @box-shadow;
            box-shadow: @box-shadow;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }

          input[type=text] {
            border: none;
            background: none;
            padding: 0;
            padding-right: 10px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            outline: none;
            font-family: inherit;
            font-weight: inherit;
            text-indent: 10px;
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          li {
            @padding: 5px;
            background-color: @color-grey-background;
            border-bottom: solid 1px lighten(@color-grey-border, 8%);
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      .section-empty {
        font-style: italic;
        color: darken(@color-grey-background, 40%);
        margin-top: @section-padding * 2;

        &.center {
          @height: 160px;

          text-align: center;
          position: absolute;
          top: 50%;
          width: 100%;
          padding: 10px;
          margin: -@section-padding;
          height: @height;
          margin-top: -@height/2;
          font-size: 19px;
          font-style: normal;
          font-weight: 200;
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @site-border-radius - 1px;
          border-top-right-radius: @site-border-radius - 1px;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @site-border-radius - 1px;
          border-bottom-right-radius: @site-border-radius - 1px;
        }
      }

      #queue-section {
        #search-results-list {
          background-color: @color-grey-background;
          margin: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }

        #search-results-list .section-results-placeholder {
          color: darken(@color-grey-background, 40%);
          margin: 5px;
          font-size: 13px;
        }

        #search-results-list .section-header {
          position: relative;
          min-height: 24px;
          border-bottom: none;
          background-color: darken(@color-grey-background, 3%);
          border: solid 1px lighten(@color-grey-border, 10%);

          .loading-gradient, .content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
          }

          .loading-gradient {
            z-index: 99;

            @background: darken(@color-grey-background, 3%);
            @background-emphasis: darken(@background, 20%);
            @background-emphasis: lighten(@color-purple, 45%);
            @background-emphasis: lighten(@background, 10%);

            @gradient: left, @background 10%, @background-emphasis 50%, @background 90%;
            background: -moz-linear-gradient(@gradient);
            background: -webkit-linear-gradient(@gradient);
            background: -o-linear-gradient(@gradient);
            background: -ms-linear-gradient(@gradient);
            background: linear-gradient(@gradient);
            background-size: 170%;

            @animation-def: loading_shimmer 800s linear 0s infinite;
            @animation-def: loading_shimmer 500s linear 0s infinite;
            -webkit-animation: @animation-def;
            -moz-animation: @animation-def;
            -o-animation: @animation-def;
            animation: @animation-def;

            opacity: 0;
            -webkit-transition: opacity 1s;
            transition: opacity 1s;

            text-align: right;
            font-size: 11px;
            padding: 3px 10px;
            color: darken(@color-grey-background, 30%);
            letter-spacing: 0.4px;
            font-weight: 300;
          }

          .content {
            font-size: 12px;
            font-weight: 400;
            padding: 3px 5px;
            z-index: 100;
          }
        }

        #search-results-list.loading .section-header {
          .loading-gradient {
            opacity: 1;
          }
        }

        #queue-list li, #search-results-list li.song {
          @height: 40px;
          @inner-height: @height - 10px;

          position: relative;
          height: @height;

          &:hover {
            .fg .controls {
              opacity: 1;
            }
          }

          .artwork {
            width: @inner-height;
            height: @inner-height;
            background-color: darken(@color-grey-background, 10%);
            background-image: url('/images/unknown_song.png');
            background-size: contain;
            display: inline-block;
            border-radius: 3px;
          }

          .fg {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: inline-block;
            margin-left: @height;
            line-height: 18px;
            font-size: 13px;
            white-space: nowrap;

            .faded-edge {
              @box-shadow: inset -30px 0 24px -15px @color-grey-background;
              -webkit-box-shadow: @box-shadow;
              -moz-box-shadow: @box-shadow;
              box-shadow: @box-shadow;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              pointer-events: none;
            }

            .controls {
              @transition: opacity .06s ease-in-out;
              transition: @transition;
              -moz-transition: @transition;
              -webkit-transition: @transition;
              z-index: 10;
              opacity: 0;
              position: absolute;
              top: 0;
              right: 0;
              padding-top: 1px;
              padding-right: 3px;

              a {
                text-decoration: none;
                color: darken(@color-grey-background, 50%);

                &:hover:not(.disabled) {
                  color: darken(@color-grey-background, 70%);
                }

                &.disabled {
                  color: darken(@color-grey-background, 30%);
                }
              }
            }

            .title, .artist, .album {
              white-space: nowrap;
            }

            .title {
              display: block;
              font-weight: 300;
              color: darken(@color-grey-background, 60%);
            }

            .artist, .album {
              font-weight: 200;
              color: darken(@color-grey-background, 30%);
            }
          }

          &.playing, &.highlighted {
            background-color: @color-purple;
            @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.2);
            -webkit-box-shadow: @box-shadow;
            box-shadow: @box-shadow;

            .fg {
              .title, .artist, .album {
                color: white;
              }

              .faded-edge {
                @box-shadow: inset -30px 0 24px -15px @color-purple;
                -webkit-box-shadow: @box-shadow;
                -moz-box-shadow: @box-shadow;
                box-shadow: @box-shadow;
              }
            }
          }
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

.navbar .playback-placeholder {
  line-height: @navbar-height;
  cursor: default;
  color: #777;
}

.navbar .playback {
  @playback-height: @navbar-height;
  @timeline-height: 18px;
  @timeline-padding: 3px;
  @info-height: @playback-height - @timeline-height;
  @info-padding: @timeline-padding;

  .info {
    @inner-height: @info-height - @info-padding;
    @font-color: darken(@color-grey-background, 60%);

    height: @info-height;
    padding: @info-padding;
    font-size: 12px;
    line-height: @inner-height / 2;
    text-align: left;
    overflow: hidden;
    cursor: default;
    position: relative;

    .artwork {
      @size: @inner-height;
      width: @size;
      height: @size;
      float: left;
      background-size: contain;
      margin-right: @info-padding;
      border-radius: 3px;

      &.no-artwork {
        background-image: url('/images/unknown_song.png');
      }
    }

    .title {
      color: @font-color;
      font-weight: bold;
    }

    .artist, .album {
      display: inline-block;
      color: lighten(@font-color, 20%);
    }

    .controls {
      text-align: right;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding-right: 5px;
      padding-top: 5px;

      &:empty {
        display: none;
      }

      a {
        text-decoration: none;
        font-size: 22px;
        color: darken(@color-grey-background, 50%);

        &:hover:not(.disabled) {
          color: darken(@color-grey-background, 70%);
        }

        &.disabled {
          color: darken(@color-grey-background, 30%);
        }
      }

      .btn-skip {
        font-size: 17px;
        position: relative;
        bottom: 3px;
      }
    }
  }

  .timeline {
    @inner-height: @timeline-height - (@timeline-padding * 2);
    height: @inner-height;
    margin: @timeline-padding;
    background-color: darken(@color-grey-background, 12%);
    position: relative;
    border-radius: @site-border-radius;
    cursor: default;

    .left, .right {
      position: absolute;
      font-size: 10px;
      line-height: @inner-height;
      color: darken(@color-grey-background, 60%);
      padding-bottom: 1px;
    }

    .left {
      left: 5px;
    }

    .right {
      right: 4px;
    }

    .played-container {
      background-color: darken(@color-grey-background, 5%);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 30px;
      @box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.05);
      -webkit-box-shadow: @box-shadow;
      box-shadow: @box-shadow;

      .played {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        background-color: @color-purple;
        @box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.4);
        -webkit-box-shadow: @box-shadow;
        box-shadow: @box-shadow;
      }
    }
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

#btn-begin-dj, #btn-end-dj {
  display: none;
}


Get rid of 1px border in post header sub-title

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/hevnly/asset-bazaar.git/'


试试能不能去掉默认

试试能不能去掉默认

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/Didichaoren/Didichaoren.github.io.git/'


Fix typo

Fix typo

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


Create mixins.less

Create mixins.less

.pk-noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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


Add global less to configure Material UI components

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/ziagrosvenor/sound-machine.git/'


Update headings.less

Update headings.less

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


added default Tapestry color scheme (wip)

/* fonts */
@import (css) url(https://fonts.googleapis.com/css?family=Jaldi:400,700);
@import "../tapestry/less/theme.less";

body{font-family: Jaldi;}

///////////////////////////////////////
// Setup Page Editor Interface Colors

.tapestry-default-colors(){
    //a function used to set up default values for all the required theme colors
    //use this function, then override some theme variables to make a unique "box" theme
    @has-all:false;
    @has-rainbow:false;
    @has-rows:false;
    @has-tabs:false;
    @has-buttons:false;
    @has-inputs:false;
    @has-ui:false;
    @has-windows:false;
    @has-tooltip:false;
    @has-code:false;
    @has-graphs:false;

    @box-bg:#eee;
    @box-border:transparent;
    @box-font:#444;
    @box-a-link:#009B87;
    @box-a-hover:#00C5C7;
    @box-a-active:#00C5C7;
    @box-a-faded-link:#58CABB;
    @box-a-faded-hover:#61D4D5;
    @box-a-faded-active:#66FDFF;
    @box-icon-link:#555;
    @box-icon-hover:#009B87;
    @box-icon-active:#00A46C;

    @box-font-faded:rgba(0,0,0,0.3);
    @box-font-price:#009B87;
    @box-font-positive:#4DA400;
    @box-font-negative:#FF2222;
    @box-font-time:#376EB2;

    @box-font-red:#FF2222;
    @box-font-orange:#FF6B22;
    @box-font-yelloworange:#FF9F22;
    @box-font-yellow:#FFC822;
    @box-font-yellowgreen:#B2C700;
    @box-font-green:#4DA400;
    @box-font-turqoise:#37B277;
    @box-font-skyblue:#37B2AB;
    @box-font-blue:#376EB2;
    @box-font-purple:#6B37B2;
    @box-font-pink:#C120B0;
    @box-font-grey:#6A6A6A;

    @row-bg:transparent;
    @row-hover:#A7D8DB;
    @row-selected:#5EC7CE;
    @row-font:#444;
    @row-font-hover:#33494C;
    @row-font-selected:#13474F;
    @row-a-link:#009B87;
    @row-a-hover:#00C5C7;
    @row-a-active:#00C5C7;
    @row-a-selected:#00B4FF;
    @row-icon-link:#555;
    @row-icon-hover:#009B87;
    @row-icon-active:#00A46C;
    @row-icon-selected:#185A64;

    @row-alt-bg:#d0d0d0;
    @row-alt-hover:#91CBCF;
    @row-alt-selected:#43B9C1;
    @row-alt-font:#444;
    @row-alt-font-hover:#314747;
    @row-alt-font-selected:#1C4646;
    @row-alt-a-link:#009B87;
    @row-alt-a-hover:#00C5C7;
    @row-alt-a-active:#00C5C7;
    @row-alt-a-selected:#00B4FF;
    @row-alt-icon-link:#555;
    @row-alt-icon-hover:#009B87;
    @row-alt-icon-active:#00A46C;
    @row-alt-icon-selected:#185A64;

    @col-input-label:#007A8D;

    @button-bg:#009B87;
    @button-bg-hover:#00A46C;
    @button-bg-active:#00C5C7;
    @button-bg-selected:#00A46C;
    @button-border:transparent;
    @button-border-hover:transparent;
    @button-border-active:transparent;
    @button-border-selected:transparent;
    @button-font:#fff;
    @button-font-hover:#fff;
    @button-font-active:#fff;
    @button-font-selected:#fff;

    @button-apply-bg:transparent;
    @button-apply-bg-hover:transparent;
    @button-apply-bg-active:transparent;
    @button-apply-bg-selected:transparent;
    @button-apply-border:transparent;
    @button-apply-border-hover:transparent;
    @button-apply-border-active:transparent;
    @button-apply-border-selected:transparent;
    @button-apply-font:transparent;
    @button-apply-font-hover:transparent;
    @button-apply-font-active:transparent;
    @button-apply-font-selected:transparent;

    @button-cancel-bg:transparent;
    @button-cancel-bg-hover:transparent;
    @button-cancel-bg-active:transparent;
    @button-cancel-bg-selected:transparent;
    @button-cancel-border:transparent;
    @button-cancel-border-hover:transparent;
    @button-cancel-border-active:transparent;
    @button-cancel-border-selected:transparent;
    @button-cancel-font:transparent;
    @button-cancel-font-hover:transparent;
    @button-cancel-font-active:transparent;
    @button-cancel-font-selected:transparent;

    @button-delete-bg:transparent;
    @button-delete-bg-hover:transparent;
    @button-delete-bg-active:transparent;
    @button-delete-bg-selected:transparent;
    @button-delete-border:transparent;
    @button-delete-border-hover:transparent;
    @button-delete-border-active:transparent;
    @button-delete-border-selected:transparent;
    @button-delete-font:transparent;
    @button-delete-font-hover:transparent;
    @button-delete-font-active:transparent;
    @button-delete-font-selected:transparent;

    @button-special-bg:transparent;
    @button-special-bg-hover:transparent;
    @button-special-bg-active:transparent;
    @button-special-bg-selected:transparent;
    @button-special-border:transparent;
    @button-special-border-hover:transparent;
    @button-special-border-active:transparent;
    @button-special-border-selected:transparent;
    @button-special-font:transparent;
    @button-special-font-hover:transparent;
    @button-special-font-active:transparent;
    @button-special-font-selected:transparent;

    @button-disabled-bg:transparent;
    @button-disabled-bg-hover:transparent;
    @button-disabled-bg-active:transparent;
    @button-disabled-bg-selected:transparent;
    @button-disabled-border:transparent;
    @button-disabled-border-hover:transparent;
    @button-disabled-border-active:transparent;
    @button-disabled-border-selected:transparent;
    @button-disabled-font:transparent;
    @button-disabled-font-hover:transparent;
    @button-disabled-font-active:transparent;
    @button-disabled-font-selected:transparent;

    @button-outline-bg:transparent;
    @button-outline-bg-hover:transparent;
    @button-outline-bg-active:transparent;
    @button-outline-bg-selected:transparent;
    @button-outline-border:transparent;
    @button-outline-border-hover:transparent;
    @button-outline-border-active:transparent;
    @button-outline-border-selected:transparent;
    @button-outline-font:transparent;
    @button-outline-font-hover:transparent;
    @button-outline-font-active:transparent;
    @button-outline-font-selected:transparent;

    @button-outline-apply-bg:transparent;
    @button-outline-apply-bg-hover:transparent;
    @button-outline-apply-bg-active:transparent;
    @button-outline-apply-bg-selected:transparent;
    @button-outline-apply-border:transparent;
    @button-outline-apply-border-hover:transparent;
    @button-outline-apply-border-active:transparent;
    @button-outline-apply-border-selected:transparent;
    @button-outline-apply-font:transparent;
    @button-outline-apply-font-hover:transparent;
    @button-outline-apply-font-active:transparent;
    @button-outline-apply-font-selected:transparent;

    @button-outline-cancel-bg:transparent;
    @button-outline-cancel-bg-hover:transparent;
    @button-outline-cancel-bg-active:transparent;
    @button-outline-cancel-bg-selected:transparent;
    @button-outline-cancel-border:transparent;
    @button-outline-cancel-border-hover:transparent;
    @button-outline-cancel-border-active:transparent;
    @button-outline-cancel-border-selected:transparent;
    @button-outline-cancel-font:transparent;
    @button-outline-cancel-font-hover:transparent;
    @button-outline-cancel-font-active:transparent;
    @button-outline-cancel-font-selected:transparent;

    @button-outline-delete-bg:transparent;
    @button-outline-delete-bg-hover:transparent;
    @button-outline-delete-bg-active:transparent;
    @button-outline-delete-bg-selected:transparent;
    @button-outline-delete-border:transparent;
    @button-outline-delete-border-hover:transparent;
    @button-outline-delete-border-active:transparent;
    @button-outline-delete-border-selected:transparent;
    @button-outline-delete-font:transparent;
    @button-outline-delete-font-hover:transparent;
    @button-outline-delete-font-active:transparent;
    @button-outline-delete-font-selected:transparent;

    @button-outline-special-bg:transparent;
    @button-outline-special-bg-hover:transparent;
    @button-outline-special-bg-active:transparent;
    @button-outline-special-bg-selected:transparent;
    @button-outline-special-border:transparent;
    @button-outline-special-border-hover:transparent;
    @button-outline-special-border-active:transparent;
    @button-outline-special-border-selected:transparent;
    @button-outline-special-font:transparent;
    @button-outline-special-font-hover:transparent;
    @button-outline-special-font-active:transparent;
    @button-outline-special-font-selected:transparent;

    @button-outline-disabled-bg:transparent;
    @button-outline-disabled-bg-hover:transparent;
    @button-outline-disabled-bg-active:transparent;
    @button-outline-disabled-bg-selected:transparent;
    @button-outline-disabled-border:transparent;
    @button-outline-disabled-border-hover:transparent;
    @button-outline-disabled-border-active:transparent;
    @button-outline-disabled-border-selected:transparent;
    @button-outline-disabled-font:transparent;
    @button-outline-disabled-font-hover:transparent;
    @button-outline-disabled-font-active:transparent;
    @button-outline-disabled-font-selected:transparent;

    @button-icon:#fff;
    @button-icon-hover:#fff;
    @button-icon-active:#fff;

    @button-icon-apply:transparent;
    @button-icon-apply-hover:transparent;
    @button-icon-apply-active:transparent;

    @button-icon-cancel:transparent;
    @button-icon-cancel-hover:transparent;
    @button-icon-cancel-active:transparent;

    @button-icon-delete:transparent;
    @button-icon-delete-hover:transparent;
    @button-icon-delete-active:transparent;

    @button-icon-special:transparent;
    @button-icon-special-hover:transparent;
    @button-icon-special-active:transparent;

    @button-icon-disabled:transparent;
    @button-icon-disabled-hover:transparent;
    @button-icon-disabled-active:transparent;
}

.box{
    //box styling
    .tapestry-default-colors();
    @has-all:true;
    @box-bg:#efefef;
    .tapestry-theme();
}

.box .section{
    //box section styling
    .tapestry-default-colors();
    @has-all:true;
    @box-bg:#fafafa;
    @box-border:#dadada;
    .tapestry-theme();
}

.box .section .row.header{
    //box section header styling
    .tapestry-default-colors();
    @has-buttons:true;
    @has-menu:true;
    @box-bg:transparent;
    .tapestry-theme();
}

.dash-menu{
    //dashboard menu styling
    .tapestry-default-colors();
    @has-buttons:true;
    @has-inputs:true;
    @box-bg:#71a596;
    @box-font:#fff;
    @box-a-link:#FDFFC7;
    @box-a-hover:#FBFF83;
    @box-a-active:#FFEF69;
    @box-a-faded-link:fade(#FDFFC7, 50%);
    @box-a-faded-hover:fade(#FBFF83, 50%);
    @box-a-faded-active:fade(#FFEF69, 50%);
    @box-icon-link:#fff;
    @box-icon-hover:#FBFF83;
    @box-icon-active:#FFEF69;
    @box-font-faded:fade(#fff, 50%);

    @row-hover:#47947E;
    @row-selected:#1A9484;
    @row-font:#D0F3EE;
    @row-font-hover:#fff;
    @row-font-selected:#A9F6EC;
    @row-a-link:#FDFFC7;
    @row-a-hover:#FBFF83;
    @row-a-active:#FFEF69;
    @row-icon-link:#fff;
    @row-icon-hover:#FBFF83;
    @row-icon-active:#FFEF69;

    @row-alt-bg:#689D8E;
    @row-alt-hover:#3C8C75;
    @row-alt-selected:#178B7C;
    @row-alt-font:#D0F3EE;
    @row-alt-font-hover:#fff;
    @row-alt-font-selected:#A9F6EC;
    @row-alt-a-link:#FDFFC7;
    @row-alt-a-hover:#FBFF83;
    @row-alt-a-active:#FFEF69;
    @row-alt-icon-link:#fff;
    @row-alt-icon-hover:#FBFF83;
    @row-alt-icon-active:#FFEF69;
    .tapestry-theme();

    //custom colors
    .submenu{
        background-color:#5B9987;
        .row.hover:hover{background-color:#338B72;}
        .submenu{
            background-color:#49917C;
            .row.hover:hover{background-color:#29876C;}
        }
    }
}

.dash-menu .row.header{
    //dashboard menu styling
    .tapestry-default-colors();
    @has-buttons:true;
    @has-inputs:true;
    @box-bg:#5B9987;
    @box-font:#fff;
    @box-a-link:#FDFFC7;
    @box-a-hover:#FBFF83;
    @box-a-active:#FFEF69;
    @box-a-faded-link:fade(#FDFFC7, 50%);
    @box-a-faded-hover:fade(#FBFF83, 50%);
    @box-a-faded-active:fade(#FFEF69, 50%);
    @box-icon-link:#fff;
    @box-icon-hover:#FBFF83;
    @box-icon-active:#FFEF69;
    @box-font-faded:fade(#fff, 50%);

    @row-hover:#47947E;
    @row-selected:#1A9484;
    @row-font:#D0F3EE;
    @row-font-hover:#fff;
    @row-font-selected:#A9F6EC;
    @row-a-link:#FDFFC7;
    @row-a-hover:#FBFF83;
    @row-a-active:#FFEF69;
    @row-icon-link:#fff;
    @row-icon-hover:#FBFF83;
    @row-icon-active:#FFEF69;

    @row-alt-bg:#689D8E;
    @row-alt-hover:#3C8C75;
    @row-alt-selected:#178B7C;
    @row-alt-font:#D0F3EE;
    @row-alt-font-hover:#fff;
    @row-alt-font-selected:#A9F6EC;
    @row-alt-a-link:#FDFFC7;
    @row-alt-a-hover:#FBFF83;
    @row-alt-a-active:#FFEF69;
    @row-alt-icon-link:#fff;
    @row-alt-icon-hover:#FBFF83;
    @row-alt-icon-active:#FFEF69;
    .tapestry-theme();
}

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


Fix .notice padding to correctly center text

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/mmistakes/made-mistakes.git/'


menu fix again

menu fix again

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/wilwong/hjck2017.git/'


Fixes lang item color on white section

Fixes lang item color on white section

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


Fix typo

Fix typo

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


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/sharkspeed/dororis.git/'


Add some explanatory text about cascading themes

@import "bootstrap/less/variables.less";
@import "octicon-mixins.less";

#config-view {
  height: 100%;
  width: 100%;
  background: white;
  display: -webkit-flex;

  #panels-menu {
    width: 150px;
    margin-top: @line-height-base;
    margin-left: @line-height-base;

    li a {
      cursor: pointer;
    }
  }

  #panels {
    -webkit-flex: 1;
    -webkit-flex-flow: column;
    display: -webkit-flex;
    padding: @line-height-base;
    position: relative;
    overflow-y: auto;

    > div {
      -webkit-flex: 1;
    }
  }

  #themes-config {
    height: 100%;
    display: -webkit-flex;
    -webkit-flex-flow: column;

    #theme-picker {
      -webkit-flex: 1;
      display: -webkit-flex;
      min-height: 0;

      .panel {
        -webkit-flex: 1;
        display: -webkit-flex;
        -webkit-flex-flow: column;
        min-height: 0;
        &:first-child { margin-right: @line-height-base / 2; }
        &:last-child { margin-left: @line-height-base / 2; }

        .panel-heading {
          margin-bottom: 0;
        }

        ol {
          margin-top: 0;
          -webkit-flex: 1;
          min-height: 0;
          overflow: auto;

          li {
            -webkit-user-select: none;
            cursor: default;
            padding-right: 15px;
            &:first-child { border-top: 0; }
          }
        }

        #enabled-themes {
          li:hover .disable-theme {
            .mini-icon(x);
            color: #888;
            cursor: pointer;
            &:hover { color: #000; }
          }
        }
      }
    }

    li.ui-draggable-dragging, li.ui-sortable-helper {
      border: 0;
      box-sizing: content-box;
      background: white;
      border-radius: 0;
      box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    }

/*    li.ui-draggable-dragging, li.ui-sortable-helper {
      width: 300px;
      background: white;
      border: 1px solid #eee;
      padding: 10px;
    }

    ol {
      box-sizing: border-box;
      height: 400px;
      overflow-y:  auto;
      border: 1px solid #ccc;
      border-top-width: 0;
      background: #fafafa;

      li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        background: white;

        input[type='checkbox'] {
          margin-right: 10px;
        }

        .close-icon {
          display: none;
        }
      }
    }*/

  }

  #packages {
    white-space: nowrap;
    .package-enabled {
      width: 30px;
      text-align: center;
    }
  }
}

@import "bootstrap/less/variables.less";
@import "octicon-mixins.less";

#config-view {
  height: 100%;
  width: 100%;
  background: white;
  display: -webkit-flex;

  #panels-menu {
    width: 150px;
    margin-top: @line-height-base;
    margin-left: @line-height-base;

    li a {
      cursor: pointer;
    }
  }

  #panels {
    -webkit-flex: 1;
    -webkit-flex-flow: column;
    display: -webkit-flex;
    padding: @line-height-base;
    position: relative;
    overflow-y: auto;

    > div {
      -webkit-flex: 1;
    }
  }

  #themes-config {
    height: 100%;
    display: -webkit-flex;
    -webkit-flex-flow: column;

    #theme-picker {
      -webkit-flex: 1;
      display: -webkit-flex;
      min-height: 0;

      .panel {
        -webkit-flex: 1;
        display: -webkit-flex;
        -webkit-flex-flow: column;
        min-height: 0;
        &:first-child { margin-right: @line-height-base / 2; }
        &:last-child { margin-left: @line-height-base / 2; }

        .panel-heading {
          margin-bottom: 0;
        }

        ol {
          margin-top: 0;
          -webkit-flex: 1;
          min-height: 0;
          overflow: auto;

          li {
            padding-right: 15px;
            &:first-child { border-top: 0; }
          }
        }

        #enabled-themes {
          li:hover .disable-theme {
            .mini-icon(x);
            color: #888;
            cursor: pointer;
            &:hover { color: #000; }
          }
        }
      }
    }

    li.ui-draggable-dragging, li.ui-sortable-helper {
      border: 0;
      box-sizing: content-box;
      background: white;
      border-radius: 0;
      box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    }

/*    li.ui-draggable-dragging, li.ui-sortable-helper {
      width: 300px;
      background: white;
      border: 1px solid #eee;
      padding: 10px;
    }

    ol {
      box-sizing: border-box;
      height: 400px;
      overflow-y:  auto;
      border: 1px solid #ccc;
      border-top-width: 0;
      background: #fafafa;

      li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        background: white;

        input[type='checkbox'] {
          margin-right: 10px;
        }

        .close-icon {
          display: none;
        }
      }
    }*/

  }

  #packages {
    white-space: nowrap;
    .package-enabled {
      width: 30px;
      text-align: center;
    }
  }
}


don't need this white background anymore and it causes a bug on hosted setup (#11436)

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/beeftornado/sentry.git/'


Fixing broken font-awesome path

Fixing broken font-awesome path

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/perspective/perspective-client.git/'


updated circle views

updated circle views

@import "bootstrap/less/bootstrap";

// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
.section {
  .make-row();
}
.main {
  .make-lg-column(9);
  background-color: @main;
}
.left-sidebar {
  .make-lg-column(3);
  background-color:@sidebar;
}
.filter-row {
  .section;
  display: block;
}
.filter-btn {
  .btn-default;
  .btn-sm;
  .make-lg-column(4);
}
.filter-btn-ethnicity {
  .btn-sm;
  .btn-default;
  .make-lg-column(6);
}
.main-heading {
  .make-lg-column(10);
  .row;
}

.category-header(@cols: 2) {
  .make-lg-column(@cols);
  text-align: left;
  font-weight: bold;
}
.category-header-lg {
  .category-header(3);
}

.category {
  background-color: @category;
  .make-lg-column(12);
  vertical-align: baseline;
}
.category-title {
  .make-lg-column(6);
  font-weight: bold;
  margin-left:0;
  background-color: @title-color;
  padding-left: 0;
  vertical-align: center;
  margin-bottom: 0;
  line-height: @title-line-height;
}
.category-header-percent {
  .make-lg-column(2);
  text-align: center;

}
.title-circle {
  height: 1.5em;
  width: 1.5em;
  font-size: 2em;
  border-radius: .75em;
  background-color: @circle-bkg-color;
  text-align: center;
}

.category-header-fraction {
  .make-lg-column(3);
  font-weight: bold;
  line-height: @title-line-height;
}

//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://getbootstrap.com/customize/#less-variables for their names and documentation
//
@link-color: #49969E;
@brand-primary: #49969E;
@category: #f2f2f2;
@circle-border: #f2f2f2;
@main: white;
@sidebar: #49969E;
@title-color: #f2f2f2;
@btn-hover: #357177;
@title-line-height: 1.5;
@listing-line-height: 1.5;
@circle-bkg-color: #fff;

.btn-lg {
  float: right;
}
.btn-main {
  .make-lg-column(2);
}

.panel {
  width: 100%;
}
.measure {
  .make-lg-column(6);
  line-height: @listing-line-height;
}
.percent-listing {
  .make-lg-column(2);
  font-size: 2em;
}
.circle-listing {
  height: 3em;
  width: 3em;
  border-radius: 1.5em;
  background-color: @circle-bkg-color;
  border: 2px solid @circle-border;
  margin: 10px 0;
  h2 {
    text-align: center;
  }
}

.fraction-listing {
  .make-lg-column(3);
}

@import "bootstrap/less/bootstrap";

// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
.section {
  .make-row();
}
.main {
  .make-lg-column(9);
  background-color: @main;
}
.left-sidebar {
  .make-lg-column(3);
  background-color:@sidebar;
}
.filter-row {
  .section;
  display: block;
}
.filter-btn {
  .btn-default;
  .btn-sm;
  .make-lg-column(4);
}
.filter-btn-ethnicity {
  .btn-sm;
  .btn-default;
  .make-lg-column(6);
}
.main-heading {
  .make-lg-column(10);
}

.category-header(@cols: 2) {
  .make-lg-column(@cols);
  text-align: left;
  font-weight: bold;
}
.category-header-lg {
  .category-header(3);
}

.category {
  background-color: @category;
  .make-lg-column(12);
  vertical-align: baseline;
}
.category-title {
  .make-lg-column(6);
  font-weight: bold;
  margin-left:0;
  background-color: @title-color;
  padding-left: 0;
  vertical-align: center;
  margin-bottom: 0;
  line-height: @title-line-height;
}
.category-header-percent {
  .make-lg-column(2);
  text-align: center;

}
.title-circle {
  height: 1.5em;
  width: 1.5em;
  font-size: 2em;
  border-radius: .75em;
  background-color: @circle-bkg-color;
  text-align: center;
}

.category-header-fraction {
  .make-lg-column(3);
  font-weight: bold;

  line-height: @title-line-height;
}

//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://getbootstrap.com/customize/#less-variables for their names and documentation
//
@link-color: #49969E;
@brand-primary: #49969E;
@category: #f2f2f2;
@circle-border: #f2f2f2;
@main: white;
@sidebar: #49969E;
@title-color: #f2f2f2;
@btn-hover: #357177;
@title-line-height: 1.5;
@listing-line-height: 1.5;
@circle-bkg-color: #fff;

.btn-lg {
  float: right;
}
.btn-main {
  .make-lg-column(2);
}

.panel {
  width: 100%;
}
.measure {
  .make-lg-column(6);
  line-height: @listing-line-height;
}
.percent-listing {
  .make-lg-column(2);
  font-size: 2em;
}
.circle-listing {
  height: 3em;
  width: 3em;
  border-radius: 1.5em;
  background-color: @circle-bkg-color;
  border: 2px solid @circle-border;
  margin: 10px 0;
  h2 {
    text-align: center;
  }
}

.fraction-listing {
  .make-lg-column(3);
}


styles for the link

styles for the link

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


here is the table file

here is the table 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/dedalozzo/pit-bootstrap.git/'


Create table.less

Create table.less

fatal: unable to access 'https://github.com/jstandish/angular-paper.git/': The requested URL returned error: 403


Made styling properties support in IE9.

Made styling properties support in IE9.

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/Livefyre/streamhub-sdk.git/'


Checkbox alignment when giving line-height to parent solved

fatal: unable to access 'https://github.com/skyiea/wix-style-react.git/': The requested URL returned error: 403


Fix typo: s/repitition/repetition

Fix typo: s/repitition/repetition

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/nviel/nico-syntax.git/'


initial revision.

initial revision.

fatal: unable to access 'https://github.com/sogrid/how-grid-is-it.git/': The requested URL returned error: 403


Add white background to UserMenu

Add white background to UserMenu

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


Fix height for tab-bar in empty panes

Fix height for tab-bar in empty panes

cf. #16

@import "ui-variables";

.tree-view {
  font-size: @font-size;
  background: @tree-view-background-color !important;

  .selected {
    // padding: 20px;
  }
  .selected:before {
    background: rgba(255,255,255, 0.05);
    box-shadow: none;
    // padding: 20px;
  }
}

.focusable-panel {
  opacity: 1;
  background: #303030;
  box-shadow: none;
  border: 0;

  &:focus {
    background: #282828;

    .selected:before {
      background: rgb(85,181,219);
    }

    .selected > .name,
    .selected > .name:before,
    .selected > .list-item > .name,
    .selected > .list-item > .name:before {
      color: #fff;
    }
  }
}

.file-list-view, .list-view {
  background: rgb(21,23,24);
  color: #FFF;
  padding: 10px;

  .file.selected {
    .filename {
      background: #262b30;
    }
    color: fff;
  }

  .selected {
    text-shadow: none;
    background: #333;
  }

  .selected:before {
    background: rgb(85,181,219);
  }

}

.list-inline.tab-bar.inset-panel {
  background: #262b30;
  margin-bottom: 0px;
}

@import "ui-variables";

.tree-view {
  font-size: @font-size;
  background: @tree-view-background-color !important;

  .selected {
    // padding: 20px;
  }
  .selected:before {
    background: rgba(255,255,255, 0.05);
    box-shadow: none;
    // padding: 20px;
  }
}

.focusable-panel {
  opacity: 1;
  background: #303030;
  box-shadow: none;
  border: 0;

  &:focus {
    background: #282828;

    .selected:before {
      background: rgb(85,181,219);
    }

    .selected > .name,
    .selected > .name:before,
    .selected > .list-item > .name,
    .selected > .list-item > .name:before {
      color: #fff;
    }
  }
}

.file-list-view, .list-view {
  background: rgb(21,23,24);
  color: #FFF;
  padding: 10px;

  .file.selected {
    .filename {
      background: #262b30;
    }
    color: fff;
  }

  .selected {
    text-shadow: none;
    background: #333;
  }

  .selected:before {
    background: rgb(85,181,219);
  }

}

.list-inline.tab-bar.inset-panel {
  background: #262b30;
  height: auto;
  margin-bottom: 0px;
}


adjusted loading module position

adjusted loading module position

fatal: unable to access 'https://github.com/amazingBastard/infosite-cms.git/': The requested URL returned error: 403


Create hux-blog.less

Create hux-blog.less

@import "variables.less";
@import "mixins.less";
@import "sidebar.less";
@import "side-catalog.less";

// Global Components

body {
	.sans-serif;
	font-size: 16px;
	// Hux mpdify to 16px (Mobile First), and increase to 20px while 768+ width
	color: @gray-dark;
	//-webkit-user-select:text; //对于 Blog 还是先不开启这句。
	overflow-x : hidden;
}

// -- Typography

p {
	margin: 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	.sans-serif;
	line-height: 1.1;
	font-weight: bold;
}
h1{
	// drop V1.1.1
	//font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h4{
    font-size: 21px;
}
a {
	color: @gray-dark;
	&:hover,
	&:focus {
		color: @brand-primary;
	}
}

a img {
	&:hover,
	&:focus {
		cursor: zoom-in;
	}
}

article{
	overflow-x : hidden;
}
blockquote {
	color: @gray;
	font-style: italic;
	font-size: 0.95em;
	margin: 20px 0 20px;
	p{
		margin: 0;
	}
}

// Utils Style Class can be used in Markdown.
small.img-hint{
	display: block;
	margin-top: -20px;
	text-align: center;
}
br + small.img-hint{
	margin-top: -40px;
}
img.shadow{
	box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
}
// Utils Style End

// Select
select{
	-webkit-appearance:none;
	margin-top:15px;
	color:#337ab7;
	border-color:#337ab7;
	padding: 0em 0.4em;
	background: white;
	&.sel-lang{
		min-height: 28px;
		font-size:14px;
	}
}

// override table style in bootstrap
.table th, .table td{
	border: 1px solid #eee !important;
}

hr.small {
	max-width: 100px;
	margin: 15px auto;
	border-width: 4px;
	border-color: white;
}
// add by Hux
pre,.table-responsive{
	// sometimes you should use vendor-feature.
	-webkit-overflow-scrolling: touch;
}
pre code{
	display: block;
	width: auto;
	white-space: pre;	// save it but no-wrap;
	word-wrap: normal;	// no-wrap
}

// In the list of posts
.postlist-container{
	margin-bottom: 15px;
}

// In the post.
.post-container{
	a{
		color:#337ab7;
		// different to @brand-primary
		&:hover,
		&:focus {
			color: @brand-primary;
		}
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 30px 0 10px;
	}
	h5{
		font-size: 19px;
		font-weight: 600;
		color:gray;
		& + p{
			margin-top: 5px;
		}
	}
	h6{
		font-size: 16px;
		font-weight: 600;
		color: gray;
		& + p{
			margin-top: 5px;
		}
	}
	ul,ol{
		margin-bottom: 40px;
		@media screen and (max-width: 768px){
			&{
				padding-left: 30px;
			}
		}
		@media screen and (max-width: 500px){
			&{
				padding-left: 20px;
			}
		}
	}
	ol ol, ol ul, ul ol, ul ul{
		margin-bottom: 5px
	}
	li{
		p{
			margin: 0;
			margin-bottom: 5px;
		}
		h1,h2,h3,h4,h5,h6{
			line-height: 2;
			margin-top: 20px;
		}
	}
	// V1.6 Hux display title by default.
	.pager li{
		width: 48%;
		&.next{ float: right};
		&.previous{ float: left};
		> a {
			width: 100%;
			> span{
				color: @gray;
				font-weight: normal;
				letter-spacing: 0.5px;
			}
		}
	}
}

// Navigation

// materialize, mobile only
@media only screen and (max-width: 767px) {
	/**
	 * Layout
	 * Since V1.6 we use absolute positioning to prevent to expand container-fluid
	 * which would cover tags. A absolute positioning make a new layer.
	 */
	.navbar-default .navbar-collapse{
		position: absolute;
     	right: 0;
		border: none;
		background: white;
		box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
		box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
		border-radius: 2px;
		width: 170px;
	}
	/**
	 * Animation
	 * HuxBlog-Navbar using genuine Material Design Animation
	 */
	#huxblog_navbar{
		/**
		 * Sharable code and 'out' function
		 */
		// the container do width-transition
		opacity: 0;
		transform: scaleX(0);
		transform-origin: top right;
		transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
		-webkit-transform: scaleX(0);
		-webkit-transform-origin: top right;
		-webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
		a {
			font-size: 13px;
			line-height: 28px;
		}
		.navbar-collapse{	// the navbar do height-transition
			height: 0px; 	// to solve container-mask-tags issue (default state).
			transform: scaleY(0);
			transform-origin: top right;
			transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
			-webkit-transform: scaleY(0);
			-webkit-transform-origin: top right;
			-webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
		}
		li{
			opacity: 0;
			transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
			-webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
		}
		/**
		 *'In' Animation
		 */
		&.in {
			transform: scaleX(1);
			-webkit-transform: scaleX(1);
			opacity: 1;
			transition: all 250ms cubic-bezier(0.23,1,0.32,1) 0ms;
			-webkit-transition: all 250ms cubic-bezier(0.23,1,0.32,1) 0ms;
			.navbar-collapse{
				transform: scaleY(1);
				-webkit-transform: scaleY(1);
				transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
				-webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
			}
			li{
				opacity: 1;
				transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
				-webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
			}
		}
	}
}

.navbar-custom {
	// materialize
	background: none;
	border:none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	.sans-serif;
	.navbar-brand {
		font-weight: 800;
		// materialize
		color: white;
		height: 56px;
		line-height: 25px;
		&:hover{
			color: rgba(255, 255, 255, 0.8);
		}
	}
	.nav {
		li {
			a {
				text-transform: uppercase;
				font-size: 12px;
				line-height: 20px;
				font-weight: 800;
				letter-spacing: 1px;
				// only highlight in mobile
				&:active{
					background: rgba(0,0,0,0.12)
				}
			}
		}
	}
	@media only screen and (min-width: 768px) {
		body{
			font-size: 20px;
		}
		background: transparent;
		border-bottom: 1px solid transparent;
		.navbar-brand {
			color: white;
			padding: 20px;
			line-height: 20px;
			&:hover,
			&:focus {
				color: @white-faded;
			}
		}
		.nav {
			li {
				a {
					color: white;
					padding: 20px;
					&:hover,
					&:focus {
						color: @white-faded;
					}
					&:active{
						background: none;
					}
				}
			}
		}
	}
	@media only screen and (min-width: 1170px) {
		-webkit-transition: background-color 0.3s;
		-moz-transition: background-color 0.3s;
		transition: background-color 0.3s;
		/* Force Hardware Acceleration in WebKit */
		-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);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		&.is-fixed {
			/* when the user scrolls down, we hide the header right above the viewport */
			position: fixed;
			top: -61px;
			background-color: fade(white, 90%);
			border-bottom: 1px solid darken(white, 5%);
			-webkit-transition: -webkit-transform 0.3s;
			-moz-transition: -moz-transform 0.3s;
			transition: transform 0.3s;
			.navbar-brand {
				color: @gray-dark;
				&:hover,
				&:focus {
					color: @brand-primary;
				}
			}
			.nav {
				li {
					a {
						color: @gray-dark;
						&:hover,
						&:focus {
							color: @brand-primary;
						}
					}
				}
			}
		}
		&.is-visible {
			/* if the user changes the scrolling direction, we show the header */
			-webkit-transform: translate3d(0, 100%, 0);
			-moz-transform: translate3d(0, 100%, 0);
			-ms-transform: translate3d(0, 100%, 0);
			-o-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}
	}
}

// Header

.intro-header {
	background: no-repeat center center;
	background-color: @gray;
	background-attachment: scroll;
	.background-cover;
	// NOTE: Background images are set within the HTML using inline CSS!
	margin-bottom: 0px;  /* 0 on mobile, modify by Hux */
	@media only screen and (min-width: 768px) {
		margin-bottom: 20px;  /* response on desktop */
	}
	.site-heading,
	.post-heading,
	.page-heading {
		padding: 85px 0 55px;
		color: white;
		@media only screen and (min-width: 768px) {
			padding: 150px 0;
		}
	}
	// masterialize
	.site-heading{
		padding: 95px 0 70px;
		@media only screen and (min-width: 768px) {
			padding: 150px 0;
		}
	}
	.site-heading,
	.page-heading {
		text-align: center;
		h1 {
			margin-top: 0;
			font-size: 50px;
		}
		.subheading {
			.sans-serif;
			font-size: 18px;
			line-height: 1.1;
			display: block;
			font-weight: 300;
			margin: 10px 0 0;
		}
		@media only screen and (min-width: 768px) {
			h1 {
				font-size: 80px;
			}
		}
	}
	.post-heading {
		h1 {
			font-size: 30px;
			margin-bottom: 24px;
		}
		.subheading,
		.meta {
			line-height: 1.1;
			display: block;
		}
		.subheading {
			.sans-serif;
			font-size: 17px;
			line-height: 1.4;
			font-weight: normal;
			margin: 10px 0 30px;
			margin-top: -5px;
		}
		.meta {
			.serif;
			font-style: italic;
			font-weight: 300;
			font-size: 18px;
			a {
				color: white;
			}
		}
		@media only screen and (min-width: 768px) {
			h1 {
				font-size: 55px;
			}
			.subheading {
				font-size: 30px;
			}
			.meta {
				font-size: 20px;
			}
		}
	}
}

// Post Preview Pages (Home Page)

.post-preview {
	> a {
		color: @gray-dark;
		&:hover,
		&:focus {
			text-decoration: none;
			color: @brand-primary;
		}
		> .post-title {
			font-size: 21px;
			line-height: 1.3;
			margin-top: 30px;
			margin-bottom: 8px;
		}
		> .post-subtitle {
			font-size: 15px;
			line-height: 1.3;
			margin: 0;
			font-weight: 300;
			margin-bottom: 10px;
		}
	}
	> .post-meta {
		.serif;
		color: @gray;
		font-size: 16px;
		font-style: italic;
		margin-top: 0;
		> a {
			text-decoration: none;
			color: @gray-dark;
			&:hover,
			&:focus {
				color: @brand-primary;
				text-decoration: underline;
			}
		}
	}
	@media only screen and (min-width: 768px) {
		> a {
			> .post-title {
				font-size: 26px;
				line-height: 1.3;
				margin-bottom: 10px;
			}
			> .post-subtitle{
				font-size: 16px;
			}
		}
		.post-meta{
			font-size: 18px;
		}
	}
}

// Hux add home-page post-content-preview
.post-content-preview{
    font-size: 13px;
    font-style: italic;
    color:#a3a3a3;
    &:hover{
        color: @brand-primary;
    }
    @media only screen and (min-width: 768px) {
        font-size:14px;
    }
}

// Sections

.section-heading {
	font-size: 36px;
	margin-top: 60px;
	font-weight: 700;
}

.caption {
	text-align: center;
	font-size: 14px;
	padding: 10px;
	font-style: italic;
	margin: 0;
	display: block;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

footer {
	font-size: 20px;
	padding: 50px 0 65px;
	.list-inline {
		margin: 0;
		padding: 0;
	}
	.copyright {
		font-size: 14px;
		text-align: center;
		margin-bottom: 0;
		a{
			color:#337ab7;
			// different to @brand-primary
			&:hover,
			&:focus {
				color: @brand-primary;
			}
		}
	}
}

// Contact Form Styles

.floating-label-form-group {
	font-size: 14px;
	position: relative;
	margin-bottom: 0;
	padding-bottom: 0.5em;
	border-bottom: 1px solid @gray-light;
	input,
	textarea {
		z-index: 1;
		position: relative;
		padding-right: 0;
		padding-left: 0;
		border: none;
		border-radius: 0;
		font-size: 1.5em;
		background: none;
		box-shadow: none !important;
		resize: none;
	}
	label {
		display: block;
		z-index: 0;
		position: relative;
		top: 2em;
		margin: 0;
		font-size: 0.85em;
		line-height: 1.764705882em;
		vertical-align: middle;
		vertical-align: baseline;
		opacity: 0;
		-webkit-transition: top 0.3s ease,opacity 0.3s ease;
		-moz-transition: top 0.3s ease,opacity 0.3s ease;
		-ms-transition: top 0.3s ease,opacity 0.3s ease;
		transition: top 0.3s ease,opacity 0.3s ease;
	}
	&::not(:first-child) {
		padding-left: 14px;
		border-left: 1px solid @gray-light;
	}
}

.floating-label-form-group-with-value {
	label {
		top: 0;
		opacity: 1;
	}
}

.floating-label-form-group-with-focus {
	label {
		color: @brand-primary;
	}
}

form .row:first-child .floating-label-form-group {
	border-top: 1px solid @gray-light;
}

// Button Styles

.btn {
	.sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1px;
	border-radius: 0;
	padding: 15px 25px;
}

.btn-lg {
	font-size: 16px;
	padding: 25px 35px;
}

.btn-default {
	&:hover,
	&:focus {
		background-color: @brand-primary;
		border: 1px solid @brand-primary;
		color: white;
	}
}

// Pager Styling

.pager {
	margin: 20px 0 0 !important;
	padding:0px !important;

	li {
		> a,
		> span {
			.sans-serif;
			text-transform: uppercase;
			font-size: 13px;
			font-weight: 800;
			letter-spacing: 1px;
			padding: 10px;
			background-color: white;
			border-radius: 0;
			@media only screen and (min-width: 768px) {
				font-size: 14px;
				padding: 15px 25px;
			}
		}

		> a {
			color: @gray-dark;
		}
		> a:hover,
		> a:focus {
			color: white;
			background-color: @brand-primary;
			border: 1px solid @brand-primary;

			// V1.6 display title
			> span{
				color: white;
			}
		}
	}

	.disabled {
		> a,
		> a:hover,
		> a:focus,
		> span {
			color: @gray;
			background-color: @gray-dark;
			cursor: not-allowed;
		}
	}
}

// -- Highlight Color Customization

::-moz-selection {
	color: white;
	text-shadow: none;
	background: @brand-primary;
}

::selection {
	color: white;
	text-shadow: none;
	background: @brand-primary;
}

img::selection {
	color: white;
	background: transparent;
}

img::-moz-selection {
	color: white;
	background: transparent;
}

/* Hux add tags support */
.tags{
	margin-bottom: -5px;
	a,.tag{
		display: inline-block;
		border: 1px solid rgba(255,255,255,0.8);
		border-radius: 999em;
		padding: 0 10px;
		color: rgba(255,255,255,1);
		line-height: 24px;
		font-size: 12px;
		text-decoration: none;
		margin: 0 1px;
		margin-bottom: 6px;
		&:hover, &:active{
			color:white;
			border-color: white;
			background-color: rgba(255,255,255,0.4);
			text-decoration: none;

		}
		@media only screen and (min-width: 768px) {
			margin-right: 5px;
		}
	}
}

#tag-heading{
	padding: 70px 0 60px;
	@media only screen and (min-width: 768px) {
		padding:55px 0;
	}

}
// tag_cloud
#tag_cloud{
	margin:20px 0 15px 0;
	a,.tag{
		font-size: 14px;
		border: none;
		line-height: 28px;
		margin: 0 2px;
		margin-bottom: 8px;
		background: #D6D6D6;
		&:hover, &:active{
			background-color: #0085a1 !important;
		}
	}
	@media only screen and (min-width: 768px) {
		margin-bottom: 25px;
	}
}

.tag-comments{
    font-size: 12px;
    	@media only screen and (min-width: 768px) {
		font-size:14px;
	}
}

.t{
	//margin-top: 50px;
	&:first-child{
		margin-top: 0px;
	}
	hr:last-of-type{
		//display: none;
	}
}
.listing-seperator{
	color:#0085a1;
	font-size: 21px !important;
	&::before{
		margin-right: 5px;
	}
	@media only screen and (min-width: 768px) {
		font-size: 20px !important;
		line-height: 2 !important;
	}
}

// Customize Style for Posts in One-Tag-List
.one-tag-list{
	.tag-text{
		font-weight: 200;
		.sans-serif;
	}
	.post-preview {
		position: relative;
		> a {
			.post-title{
				font-size: 16px;
				font-weight: 500;
				margin-top: 20px;
			}
			.post-subtitle{
				font-size: 12px;
			}
		}
		> .post-meta{
			position: absolute;
			right: 5px;
			bottom: 0px;
			margin: 0px;
			font-size: 12px;
			line-height: 12px;
		}
		@media only screen and (min-width: 768px) {
			margin-left: 20px;
			> a {
				> .post-title {
					font-size: 18px;
					line-height: 1.3
				}
				> .post-subtitle{
					font-size: 14px;
				}
			}
			.post-meta{
				font-size: 18px;
			}
		}
	}
}

/* Tags support End*/

/* Hux make all img responsible in post-container */
.post-container img{
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5em auto 1.6em auto;
}

/* Hux Optimize UserExperience */
.navbar-default .navbar-toggle {
	&:focus, &:hover{
		background-color: inherit;
	}
  	&:active{
  		background-color: rgba(255, 255, 255, 0.25);
  	}
}

/* Hux customize Style for navBar button */

.navbar-default .navbar-toggle{
	border-color: transparent;
	padding:19px 16px;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	border-radius: 50%;
	.icon-bar{
		width: 18px;
		border-radius: 0px;
		// materialize
		background-color: white;
	}
	.icon-bar+.icon-bar{
		margin-top: 3px;
	}
}

/* Hux customize Style for Duoshuo */
.comment{
	margin-top: 20px;
	#ds-thread {
		#ds-reset {
			a.ds-like-thread-button{
				border:1px solid #ddd;
				border-radius: 0px;
				background: white;
				box-shadow: none;
				text-shadow: none;
			}
			a.ds-thread-liked{

			}
			li.ds-tab a.ds-current{
				border:1px solid #ddd;
				border-radius: 0px;
				background: white;
				box-shadow: none;
				text-shadow: none;
			}
			.ds-textarea-wrapper{
				//border:1px solid #ddd;
				background: none;
			}
			.ds-gradient-bg{
				background: none;
			}
			.ds-post-options{
				border-bottom: 1px solid #ccc;
			}
			.ds-post-button{
				border-bottom: 1px solid #ccc;
			}
			//v1.6 flatten button
			.ds-post-button{
				background: white;
				box-shadow: none;
				&:hover{
					background: @gray-light;
				}
			}
		}
	}
}
#ds-smilies-tooltip ul.ds-smilies-tabs li a {
	background: white !important;
}

// Hux fullscreen mode in 404.html

.page-fullscreen .intro-header{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.page-fullscreen #tag-heading{
	position: fixed;
	left: 0;
	top: 0;
	padding-bottom: 150px;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-pack: center;
	-webkit-box-align: center;

	display: -webkit-flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	-webkit-flex-direction: column;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.page-fullscreen footer{
	position: absolute;
	width: 100%;
	bottom: 0;
	padding-bottom: 20px;
	opacity: 0.6;
	color: #fff;
}
.page-fullscreen footer .copyright{
	color: #fff;
}
.page-fullscreen footer .copyright a{
	color: #fff;
}
.page-fullscreen footer .copyright a:hover{
	color: #ddd;
}

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


Extract forms components

Extract forms components

.checkbox {
  display: flex;
  align-items: center;
  height: @base-spacing-unit*4;
  margin: 0;
  padding: 0;

  /* Override Bootstrap's default on siblings */
  &+.checkbox {
    margin: 0;
  }

  input[type="checkbox"]{
    margin: 0;
    opacity: 0;
    z-index: 1;
  }

  input[type="checkbox"]:checked + label::after {
    color: #fff;
    content: "\f383";
    font-family: "Ionicons";
    font-size: 12px;
    line-height: @base-spacing-unit*2;
    padding: 0 0 0 3px;
  }

  input[type="checkbox"]:checked + label::before {
    background-color: @brand-primary;
    border-color: @brand-primary;
  }

  input[type="checkbox"]:focus + label::before {
    outline: none;
  }

  label {
    display: inline-block;
    margin: 0 0 0 @horizontal-spacing-unit*2;
    position: relative;
    vertical-align: middle;
  }

  label::after, label::before {
    background-color: transparent;
    border-radius: 2px;
    bottom: 0;
    display: inline-block;
    height: @base-spacing-unit*2;
    left: -@horizontal-spacing-unit*4;
    margin: auto;
    position: absolute;
    top: 0;
    width: @base-spacing-unit*2;
  }

  label::before {
    border: 1px solid @btn-default-text-color;
    content: "";
    transition: border @transition-fast ease-in-out,
      color @transition-fast ease-in-out;
  }
}

error: pathspec 'src/css/components/forms.less' did not match any file(s) known to git


Add css for new find decorations

Add css for new find decorations


fixed tab name jump

fixed tab name jump

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/Digipalvelutehdas/APIKA.git/'


Update bootstrap-slider.less

Update bootstrap-slider.less

Updated to use a line height variable based on line-height-computed, but that will not overwrite the existing line-height variables.

/*!
 * Slider for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
//@import '../bower_components/bootstrap/less/variables.less';
@import 'variables.less'; // Bootstrap variables
@import 'mixins.less';    // Bootstrap mixins

@slider-line-height: @line-height-computed;

.slider {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	&.slider-horizontal {
		width: 210px;
		height: @slider-line-height;
		.slider-track {
			height: @slider-line-height/2;
			width: 100%;
			margin-top: -@slider-line-height/4;
			top: 50%;
			left: 0;
		}
		.slider-selection {
			height: 100%;
			top: 0;
			bottom: 0;
		}
		.slider-handle {
			margin-left: -@slider-line-height/2;
			margin-top: -@slider-line-height/4;
			&.triangle {
    			border-width: 0 @slider-line-height/2 @slider-line-height/2 @slider-line-height/2;
				width: 0;
				height: 0;
				border-bottom-color: #0480be;
				margin-top: 0;
			}
		}
	}
	&.slider-vertical {
		height: 210px;
		width: @slider-line-height;
		.slider-track {
			width: @slider-line-height/2;
			height: 100%;
			margin-left: -@slider-line-height/4;
			left: 50%;
			top: 0;
		}
		.slider-selection {
			width: 100%;
			left: 0;
			top: 0;
			bottom: 0;
		}
		.slider-handle {
			margin-left: -@slider-line-height/4;
			margin-top: -@slider-line-height/2;
			&.triangle {
				border-width: @slider-line-height/2 0 @slider-line-height/2 @slider-line-height/2;
				width: 1px;
				height: 1px;
				border-left-color: #0480be;
				margin-left: 0;
			}
		}
	}
	&.slider-disabled {
		.slider-handle {
			#gradient > .vertical(#dfdfdf, #bebebe);
		}
		.slider-track {
			#gradient > .vertical(#e5e5e5, #e9e9e9);
			cursor: not-allowed;
		}
	}
	input {
		display: none;
	}
	.tooltip-inner {
		white-space: nowrap;
	}
}
.slider-track {
	position: absolute;
	cursor: pointer;
	#gradient > .vertical(#f5f5f5, #f9f9f9);
	.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
	border-radius: @border-radius-base;
}
.slider-selection {
	position: absolute;
	#gradient > .vertical(#f9f9f9, #f5f5f5);
	.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
	.box-sizing(border-box);
	border-radius: @border-radius-base;
}
.slider-handle {
	position: absolute;
	width: @slider-line-height;
	height: @slider-line-height;
	#gradient > .vertical(#149bdf, #0480be);
	.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
	opacity: 0.8;
	border: 0px solid transparent;
	&.round {
		border-radius: 50%;
	}
	&.triangle {
		background: transparent none;
	}
}

/*!
 * Slider for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
//@import '../bower_components/bootstrap/less/variables.less';
@line-height-base: 20px;
@border-radius-base: 4px;
@import 'mixins.less'; // BootStrap mixins

.slider {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	&.slider-horizontal {
		width: 210px;
		height: @line-height-base;
		.slider-track {
			height: @line-height-base/2;
			width: 100%;
			margin-top: -@line-height-base/4;
			top: 50%;
			left: 0;
		}
		.slider-selection {
			height: 100%;
			top: 0;
			bottom: 0;
		}
		.slider-handle {
			margin-left: -@line-height-base/2;
			margin-top: -@line-height-base/4;
			&.triangle {
    			border-width: 0 @line-height-base/2 @line-height-base/2 @line-height-base/2;
				width: 0;
				height: 0;
				border-bottom-color: #0480be;
				margin-top: 0;
			}
		}
	}
	&.slider-vertical {
		height: 210px;
		width: @line-height-base;
		.slider-track {
			width: @line-height-base/2;
			height: 100%;
			margin-left: -@line-height-base/4;
			left: 50%;
			top: 0;
		}
		.slider-selection {
			width: 100%;
			left: 0;
			top: 0;
			bottom: 0;
		}
		.slider-handle {
			margin-left: -@line-height-base/4;
			margin-top: -@line-height-base/2;
			&.triangle {
				border-width: @line-height-base/2 0 @line-height-base/2 @line-height-base/2;
				width: 1px;
				height: 1px;
				border-left-color: #0480be;
				margin-left: 0;
			}
		}
	}
	&.slider-disabled {
		.slider-handle {
			#gradient > .vertical(#dfdfdf, #bebebe);
		}
		.slider-track {
			#gradient > .vertical(#e5e5e5, #e9e9e9);
			cursor: not-allowed;
		}
	}
	input {
		display: none;
	}
	.tooltip-inner {
		white-space: nowrap;
	}
}
.slider-track {
	position: absolute;
	cursor: pointer;
	#gradient > .vertical(#f5f5f5, #f9f9f9);
	.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
	border-radius: @border-radius-base;
}
.slider-selection {
	position: absolute;
	#gradient > .vertical(#f9f9f9, #f5f5f5);
	.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
	.box-sizing(border-box);
	border-radius: @border-radius-base;
}
.slider-handle {
	position: absolute;
	width: @line-height-base;
	height: @line-height-base;
	#gradient > .vertical(#149bdf, #0480be);
	.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
	opacity: 0.8;
	border: 0px solid transparent;
	&.round {
		border-radius: 50%;
	}
	&.triangle {
		background: transparent none;
	}
}