Update status style

Update status style

// Global variables
@space: 70px;
@wrapper-width: 750px;
@base-font-size: 24px;
@base-line-height: (20 / 14); // ~ 1.428571429
@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@sans-serif: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
@serif: Georgia, "Hiragino Mincho ProN", serif;

// Invert color switcher for images and videos
// :root { filter: invert(100%); }

.heading {
  font-family: @sans-serif;
  font-size: (@base-font-size * 10/3);
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-family: @sans-serif;
  font-size: (@base-font-size / 1.4);
  font-weight: normal;
  opacity: .5;
}

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.
// 2. The original space content hack is removed here. No need to support Opera on my personal site.
.cf {

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

  &:after {
    clear: both;
  }
}

// Basic reset
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 0 8% (@space * 1.5);
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;

  // A semitranslucent bar at the top of the page
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 8px;
    pointer-events: none;
    background: @link-color;
    content: "";
    opacity: .2;
  }
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
//
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Global fixed width wrapper
.wrapper {
  max-width: 860px;
  margin: 0 auto;
}

a, button {

  &:link,
  &:visited {
    color: @text-color;
    text-decoration: none;
    transition: color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease;

    &:hover,
    &:focus {
      border-bottom: .1em solid;
      transition: color .1s ease, border-color .1s ease, background-color .1s ease, opacity .1s ease;
    }
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  color: @link-color;
  background: fade(@text-color, 2%);
}

// Main site logo
.logo {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0 0 (@space / 5);
  text-indent: -9999em;
  background: @link-color;
  opacity: 0;
  transition: background .3s ease;

  &:hover {
    background: @text-color;
  }
}

body:hover .logo {
  opacity: 1 !important;
}

// Main navigation
.navigation { // nav.navigation
  margin: 0 0 (@space * 1.5);
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: (@base-font-size / 2);
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;
  .cf;

  li {
    display: inline-block;
    line-height: 2;
    list-style: none;

    a {
      padding: 3px 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        border: none;
      }
    }
  }
}

// Currently activated page or category a post it belongs to
.current { // li.current

  a {
    color: @link-color;
  }
}

// Titles wrapper
.wrapper {

  article { // Define them into .wrapper > article to avoid overriding site main header

    header {
      padding-bottom: (@space * 1.35);

      h1 {
        margin: 0 0 .1em;
        hyphens: auto;
        line-height: 1.1;

        // Override margin from article img
        img {
          margin-bottom: (@base-font-size * .6);
        }
      }

      h1 {
        .heading;
      }

      .latest-post {
        margin-top: 110px;
        font-size: (@base-font-size * .8);
        font-weight: normal;
        line-height: 1.2;

        a {
          font-weight: bold;
        }
      }

      small {
        display: block;
        margin: 20px 0 0;
      }

      // Used on work page
      & + .txt > :first-child {
        margin-top: 0;
      }
    }
  }
}

// Animate latest work link
.latest {
  transition: color .3s ease;
}

body:hover .latest {
  color: @link-color !important;
}

// Pserson status
.status { // h2.status
  margin: 10px 0 0;
  font-size: (@base-font-size * .75);
  font-weight: bold;

  &:before {
    @size: 12px;
    display: inline-block;
    width: @size;
    height: @size;
    margin-right: 8px;
    background: fade(@text-color, 20%);
    border-radius: 50%;
    content: "";
  }
}

.available {

  &:before {
    background: green;
  }

  a {
    color: green;
  }
}

.unavailable {

  &:before {
    background: red;
  }

  a {
    color: red;
  }
}

// Article wrapper
article {
  max-width: @wrapper-width;
  margin-bottom: (@space * 1.35);
  .cf; // For some specified posts in work category

  img, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 0 40px;
  }
}

// Basic staff inside article .txt
.txt {
  overflow: hidden;
  hyphens: auto;

  a {
    font-weight: bold;
  }

  p {
    margin: 0 0 1.1em;
    line-height: (@base-line-height * 1.2);
  }

  h3 {
    margin: @space 0 1.2em;
    .sub-heading;
  }

  ul, ol {
    margin: 0 0 1em 1.5em;

    li {
      line-height: (@base-line-height * 1.2);
    }
  }

  ol {
    margin-left: 1.75em;
  }

  blockquote {
    position: relative;
    padding-left: (@space * .75);
    font-style: italic;
    .cf;

    &:before {
      position: absolute;
      top: -16px;
      left: -8px;
      z-index: -1;
      font-family: @sans-serif;
      font-size: 120px;
      font-style: normal;
      line-height: 1;
      color: fade(@text-color, 70%);
      pointer-events: none;
      content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
    }

    cite {
      float: right;
      margin: 0 0 2em;
      font-size: 85%;
      color: fade(@text-color, 80%);

      &:before {
        content: "\2500\2500\00a0" // http://www.fileformat.info/info/unicode/char/2500/index.htm
      }
    }
  }

  sup {
    font-size: 75%;
  }

  hr {
    margin: @space 0 1.6em;
  }

  abbr:after {
    content: " (" attr(title) ")";
  }

  code, pre {
    font-family: Menlo, monospace;
    color: #68a;
  }

  // Newsletter subscription form in page "store"
  form {

    input {
      display: block;
      width: 100%;
      padding: 7px 0;
      margin: 0 0 (@space * .2);
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      border-radius: 0; // Remove border-radius for ios devices
      outline: none;
      transition: padding .2s ease;
      -webkit-appearance: none; // Remove ios pre-defined style

      &:focus {
        padding: 7px;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        box-shadow: none; // Override Firefox default styles
      }
    }
  }

  // Remove extra space for the last paragraph in the container
  & > p:last-child {
    margin-bottom: 0;
  }
}

// Posts with Chinese characters
[lang=zh] {
  text-align: justify; // Workaround solution for post with chinese
}

// Fix empty space when a paragraph starts with some asian punctuation marks
.margin-fix:first-letter {
  margin-left: -.6em;
}

// Tweet button margin fix
.tweet {
  margin-top: @space;
}

// Button styles
.btn {
  display: inline-block;
  padding: 20px 40px;
  cursor: pointer;
  background: @text-color;
  border: none;
  outline: none;

  // Redefine overrides here to pass recess syntax check
  &:link,
  &:visited {
    color: @background-color;

    &:hover,
    &:focus {
      color: @background-color;
      background: @link-color;
      border: none;
    }
  }
}

// Broser frame for images in category "work"
.browser {
  position: relative;
  padding-top: 20px;
  margin: 0 0 40px !important;
  background: rgba(0, 0, 0, .05);
  border-radius: 5px 5px 0 0;

  &:before {
    position: absolute;
    top: 6px;
    left: 8px;
    display: block;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, .15);
    border-radius: 50%;
    content: "";
  }

  img {
    margin: 0;
    box-shadow: rgba(0, 0, 0, .05) 0 -1px 0 0;
  }
}

// Special paragraph with an icon
.note, .store, .download {
  @iconSize: 40px;
  padding-left: (@iconSize * 1.25);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: @iconSize @iconSize;
}

.note     { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>"); }
.store    { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M20,0C8.954,0,0,8.954,0,20s8.954,20,20,20s20-8.954,20-20S31.046,0,20,0z M5,20c0-7.806,5.964-14.214,13.583-14.929 v3.574c-3.852,0.757-6.083,3.24-6.083,6.407c0,3.492,2.627,5.292,6.479,6.588c2.664,0.899,3.816,1.764,3.816,3.131 c0,1.44-1.404,2.232-3.456,2.232c-2.34,0-4.463-0.756-5.975-1.584l-1.08,4.211c1.368,0.792,3.708,1.44,6.119,1.548v3.734 C10.87,34.115,5,27.744,5,20z M21.931,34.862v-3.936c4.14-0.72,6.407-3.455,6.407-6.659c0-3.239-1.729-5.219-6.012-6.73 c-3.059-1.152-4.319-1.908-4.319-3.096c0-1.008,0.756-2.016,3.095-2.016c2.592,0,4.247,0.827,5.184,1.224l1.044-4.067 c-1.188-0.576-2.808-1.08-5.22-1.188V5.166C29.393,6.194,35,12.434,35,20C35,27.629,29.301,33.912,21.931,34.862z'/></svg>"); }
.download { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M29.982,5.825c-0.469,0-0.922,0.074-1.375,0.142C26.867,2.87,23.65,0.808,20,0.808c-3.729,0-6.948,2.093-8.661,5.14 c-0.439-0.059-0.875-0.122-1.321-0.122C4.513,5.825,0,10.468,0,16c0,5.533,4.495,10,10,10h7v6h-5l8,8l8-8h-5v-6h7 c5.508,0,10-4.467,10-10C40,10.469,35.489,5.825,29.982,5.825z M30,21H10c-2.751,0-5-2.398-5-5.167c0-2.749,2.124-5.09,5.051-5.09 c1.73-0.001,2.464,0.587,3.394,1.203c0-1.807,2.229-6.122,6.555-6.122c2.496,0,3.952,2.242,4.441,2.735 c-1.945,1.957-2.845,4.457-2.412,7.752h0.691c0.573-2.291,2.455-5.557,7.279-5.557c2.749,0,5,2.311,5,5.078 C35,18.602,32.749,21,30,21z'/></svg>"); }

// Reference notes and links in post
.reflist {
  font-size: .9em;
  font-style: italic;
}

.cite, .ref {
  border-bottom: none !important;

  &:target {
    color: @link-color;
    text-shadow: 0 2px 15px @link-color;
  }
}

// Post list in "work" and "note"
.list { // ul.list
  list-style: none;

  li {
    margin: 0 0 (@space * .2);

    h2 {
      .heading;

      time {
        font-size: (@base-font-size * 1.5);
        color: fade(@text-color, 30%);
        opacity: 0;
        transition: opacity .5s ease;
      }

      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }

      span {
        display: inline-block;
        width: .5em;
        text-align: center;
      }
    }

    h2 {
      font-size: (@base-font-size * 2);
      line-height: 1.2;
    }

    .txt {
      margin: (@space / 5) 0 @space;
    }

    &:hover,
    &:focus {

      h2 {

        time {
          opacity: 1;
          transition: opacity .1s ease;
        }
      }
    }
  }

  &:last-child {

    li:last-child {
      margin-bottom: 0;
    }
  }
}

.footer {
  font-size: (@base-font-size / 1.4);
  text-transform: lowercase;
}

// FlexSlider Necessary Styles
.flexslider {

  // Slides
  ul {
    margin: 0;
    list-style: none;
  }

  li {
    display: none;
    cursor: pointer;
    backface-visibility: hidden; // Hide the slides before the JS is loaded, this avoids image flashing

    &:first-child {
      display: block; // Display the first image when scripts are not ready
    }

    .flex-caption {
      margin: -30px 0 30px;
      font-weight: bold;
    }
  }
}

// FlexSlider - No JavaScript fallback
.no-js .flexslider ul li:first-child { display: block; }

// Media query stack
@media (max-width: 640px) {
  body {
    padding-left: 4%;
    padding-right: 4%;
    font-size: (@base-font-size * 0.8);
  }

  .wrapper {

    article {

      header {

        h1 {
          font-size: (@base-font-size * 2.4);
        }
      }

      .txt {

        blockquote {
          padding-left: 32.5px;

          &:before {
            top: -2px;
            left: 0px;
            font-size: 60px;
          }
        }
      }
    }
  }

  .list {

    li {

      h2 {
        font-size: (@base-font-size * 1.5);

        time {
          opacity: 1;
          font-size: (@base-font-size * 1.2);
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .navigation li {
    display: block;

    a {
      display: block;
      padding-top: 1em;
      padding-bottom: 1em;
    }
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  .wrapper {
    -webkit-text-size-adjust: none;
  }
}

// Global variables
@space: 70px;
@wrapper-width: 750px;
@base-font-size: 24px;
@base-line-height: (20 / 14); // ~ 1.428571429
@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@sans-serif: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
@serif: Georgia, "Hiragino Mincho ProN", serif;

// Invert color switcher for images and videos
// :root { filter: invert(100%); }

.heading {
  font-family: @sans-serif;
  font-size: (@base-font-size * 10/3);
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-family: @sans-serif;
  font-size: (@base-font-size / 1.4);
  font-weight: normal;
  opacity: .5;
}

// http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements.
// 2. The original space content hack is removed here. No need to support Opera on my personal site.
.cf {

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

  &:after {
    clear: both;
  }
}

// Basic reset
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 0 8% (@space * 1.5);
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;

  // A semitranslucent bar at the top of the page
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 8px;
    pointer-events: none;
    background: @link-color;
    content: "";
    opacity: .2;
  }
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
//
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Global fixed width wrapper
.wrapper {
  max-width: 860px;
  margin: 0 auto;
}

a, button {

  &:link,
  &:visited {
    color: @text-color;
    text-decoration: none;
    transition: color .5s ease, border-color .5s ease, background-color .5s ease, opacity 1.5s ease;

    &:hover,
    &:focus {
      border-bottom: .1em solid;
      transition: color .1s ease, border-color .1s ease, background-color .1s ease, opacity .1s ease;
    }
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  color: @link-color;
  background: fade(@text-color, 2%);
}

// Main site logo
.logo {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0 0 (@space / 5);
  text-indent: -9999em;
  background: @link-color;
  opacity: 0;
  transition: background .3s ease;

  &:hover {
    background: @text-color;
  }
}

body:hover .logo {
  opacity: 1 !important;
}

// Main navigation
.navigation { // nav.navigation
  margin: 0 0 (@space * 1.5);
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: (@base-font-size / 2);
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;
  .cf;

  li {
    display: inline-block;
    line-height: 2;
    list-style: none;

    a {
      padding: 3px 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        border: none;
      }
    }
  }
}

// Currently activated page or category a post it belongs to
.current { // li.current

  a {
    color: @link-color;
  }
}

// Titles wrapper
.wrapper {

  article { // Define them into .wrapper > article to avoid overriding site main header

    header {
      padding-bottom: (@space * 1.35);

      h1 {
        margin: 0 0 .1em;
        hyphens: auto;
        line-height: 1.1;

        // Override margin from article img
        img {
          margin-bottom: (@base-font-size * .6);
        }
      }

      h1 {
        .heading;
      }

      .latest-post {
        margin-top: 110px;
        font-size: (@base-font-size * .8);
        font-weight: normal;
        line-height: 1.2;

        a {
          font-weight: bold;
        }
      }

      small {
        display: block;
        margin: 20px 0 0;
      }

      // Used on work page
      & + .txt > :first-child {
        margin-top: 0;
      }
    }
  }
}

// Animate latest work link
.latest {
  transition: color .3s ease;
}

body:hover .latest {
  color: @link-color !important;
}

// Pserson status
.status { // h2.status
  margin: 10px 0 0;
  font-size: (@base-font-size * .8);

  a {

    &:before {
      @size: 14px;
      display: inline-block;
      width: @size;
      height: @size;
      margin-right: 10px;
      background: fade(@text-color, 20%);
      border-radius: 50%;
      content: "";
    }

    &:hover,
    &:focus {
      border: none;
    }
  }
}

.available {

  a {
    color: @text-color;

    &:hover {
      color: fade(green, 80%);
    }

    &:before {
      background: fade(green, 60%);
    }
  }
}
.unavailable {

  a {
    color: fade(@text-color, 50%);

    &:hover {
      color: fade(red, 60%);
    }

    &:before {
      background: fade(red, 20%);
    }
  }
}

// Article wrapper
article {
  max-width: @wrapper-width;
  margin-bottom: (@space * 1.35);
  .cf; // For some specified posts in work category

  img, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 0 40px;
  }
}

// Basic staff inside article .txt
.txt {
  overflow: hidden;
  hyphens: auto;

  a {
    font-weight: bold;
  }

  p {
    margin: 0 0 1.1em;
    line-height: (@base-line-height * 1.2);
  }

  h3 {
    margin: @space 0 1.2em;
    .sub-heading;
  }

  ul, ol {
    margin: 0 0 1em 1.5em;

    li {
      line-height: (@base-line-height * 1.2);
    }
  }

  ol {
    margin-left: 1.75em;
  }

  blockquote {
    position: relative;
    padding-left: (@space * .75);
    font-style: italic;
    .cf;

    &:before {
      position: absolute;
      top: -16px;
      left: -8px;
      z-index: -1;
      font-family: @sans-serif;
      font-size: 120px;
      font-style: normal;
      line-height: 1;
      color: fade(@text-color, 70%);
      pointer-events: none;
      content: "\201c"; // http://www.fileformat.info/info/unicode/char/201c/index.htm
    }

    cite {
      float: right;
      margin: 0 0 2em;
      font-size: 85%;
      color: fade(@text-color, 80%);

      &:before {
        content: "\2500\2500\00a0" // http://www.fileformat.info/info/unicode/char/2500/index.htm
      }
    }
  }

  sup {
    font-size: 75%;
  }

  hr {
    margin: @space 0 1.6em;
  }

  abbr:after {
    content: " (" attr(title) ")";
  }

  code, pre {
    font-family: Menlo, monospace;
    color: #68a;
  }

  // Newsletter subscription form in page "store"
  form {

    input {
      display: block;
      width: 100%;
      padding: 7px 0;
      margin: 0 0 (@space * .2);
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      border-radius: 0; // Remove border-radius for ios devices
      outline: none;
      transition: padding .2s ease;
      -webkit-appearance: none; // Remove ios pre-defined style

      &:focus {
        padding: 7px;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        box-shadow: none; // Override Firefox default styles
      }
    }
  }

  // Remove extra space for the last paragraph in the container
  & > p:last-child {
    margin-bottom: 0;
  }
}

// Posts with Chinese characters
[lang=zh] {
  text-align: justify; // Workaround solution for post with chinese
}

// Fix empty space when a paragraph starts with some asian punctuation marks
.margin-fix:first-letter {
  margin-left: -.6em;
}

// Tweet button margin fix
.tweet {
  margin-top: @space;
}

// Button styles
.btn {
  display: inline-block;
  padding: 20px 40px;
  cursor: pointer;
  background: @text-color;
  border: none;
  outline: none;

  // Redefine overrides here to pass recess syntax check
  &:link,
  &:visited {
    color: @background-color;

    &:hover,
    &:focus {
      color: @background-color;
      background: @link-color;
      border: none;
    }
  }
}

// Broser frame for images in category "work"
.browser {
  position: relative;
  padding-top: 20px;
  margin: 0 0 40px !important;
  background: rgba(0, 0, 0, .05);
  border-radius: 5px 5px 0 0;

  &:before {
    position: absolute;
    top: 6px;
    left: 8px;
    display: block;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, .15);
    border-radius: 50%;
    content: "";
  }

  img {
    margin: 0;
    box-shadow: rgba(0, 0, 0, .05) 0 -1px 0 0;
  }
}

// Special paragraph with an icon
.note, .store, .download {
  @iconSize: 40px;
  padding-left: (@iconSize * 1.25);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: @iconSize @iconSize;
}

.note     { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M27,0H4v40h32V9L27,0z M31,35H9V5h15l7,7V35z'/></svg>"); }
.store    { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M20,0C8.954,0,0,8.954,0,20s8.954,20,20,20s20-8.954,20-20S31.046,0,20,0z M5,20c0-7.806,5.964-14.214,13.583-14.929 v3.574c-3.852,0.757-6.083,3.24-6.083,6.407c0,3.492,2.627,5.292,6.479,6.588c2.664,0.899,3.816,1.764,3.816,3.131 c0,1.44-1.404,2.232-3.456,2.232c-2.34,0-4.463-0.756-5.975-1.584l-1.08,4.211c1.368,0.792,3.708,1.44,6.119,1.548v3.734 C10.87,34.115,5,27.744,5,20z M21.931,34.862v-3.936c4.14-0.72,6.407-3.455,6.407-6.659c0-3.239-1.729-5.219-6.012-6.73 c-3.059-1.152-4.319-1.908-4.319-3.096c0-1.008,0.756-2.016,3.095-2.016c2.592,0,4.247,0.827,5.184,1.224l1.044-4.067 c-1.188-0.576-2.808-1.08-5.22-1.188V5.166C29.393,6.194,35,12.434,35,20C35,27.629,29.301,33.912,21.931,34.862z'/></svg>"); }
.download { background-image: url("data:image/svg+xml,<svg width='40' height='40' xmlns='http://www.w3.org/2000/svg'><path d='M29.982,5.825c-0.469,0-0.922,0.074-1.375,0.142C26.867,2.87,23.65,0.808,20,0.808c-3.729,0-6.948,2.093-8.661,5.14 c-0.439-0.059-0.875-0.122-1.321-0.122C4.513,5.825,0,10.468,0,16c0,5.533,4.495,10,10,10h7v6h-5l8,8l8-8h-5v-6h7 c5.508,0,10-4.467,10-10C40,10.469,35.489,5.825,29.982,5.825z M30,21H10c-2.751,0-5-2.398-5-5.167c0-2.749,2.124-5.09,5.051-5.09 c1.73-0.001,2.464,0.587,3.394,1.203c0-1.807,2.229-6.122,6.555-6.122c2.496,0,3.952,2.242,4.441,2.735 c-1.945,1.957-2.845,4.457-2.412,7.752h0.691c0.573-2.291,2.455-5.557,7.279-5.557c2.749,0,5,2.311,5,5.078 C35,18.602,32.749,21,30,21z'/></svg>"); }

// Reference notes and links in post
.reflist {
  font-size: .9em;
  font-style: italic;
}

.cite, .ref {
  border-bottom: none !important;

  &:target {
    color: @link-color;
    text-shadow: 0 2px 15px @link-color;
  }
}

// Post list in "work" and "note"
.list { // ul.list
  list-style: none;

  li {
    margin: 0 0 (@space * .2);

    h2 {
      .heading;

      time {
        font-size: (@base-font-size * 1.5);
        color: fade(@text-color, 30%);
        opacity: 0;
        transition: opacity .5s ease;
      }

      time + a {
        line-height: 0; // An infinite symbol next to the post date, need line-height: 0 to make vertical-align work
        vertical-align: 3px;
      }

      span {
        display: inline-block;
        width: .5em;
        text-align: center;
      }
    }

    h2 {
      font-size: (@base-font-size * 2);
      line-height: 1.2;
    }

    .txt {
      margin: (@space / 5) 0 @space;
    }

    &:hover,
    &:focus {

      h2 {

        time {
          opacity: 1;
          transition: opacity .1s ease;
        }
      }
    }
  }

  &:last-child {

    li:last-child {
      margin-bottom: 0;
    }
  }
}

.footer {
  font-size: (@base-font-size / 1.4);
  text-transform: lowercase;
}

// FlexSlider Necessary Styles
.flexslider {

  // Slides
  ul {
    margin: 0;
    list-style: none;
  }

  li {
    display: none;
    cursor: pointer;
    backface-visibility: hidden; // Hide the slides before the JS is loaded, this avoids image flashing

    &:first-child {
      display: block; // Display the first image when scripts are not ready
    }

    .flex-caption {
      margin: -30px 0 30px;
      font-weight: bold;
    }
  }
}

// FlexSlider - No JavaScript fallback
.no-js .flexslider ul li:first-child { display: block; }

// Media query stack
@media (max-width: 640px) {
  body {
    padding-left: 4%;
    padding-right: 4%;
    font-size: (@base-font-size * 0.8);
  }

  .wrapper {

    article {

      header {

        h1 {
          font-size: (@base-font-size * 2.4);
        }
      }

      .txt {

        blockquote {
          padding-left: 32.5px;

          &:before {
            top: -2px;
            left: 0px;
            font-size: 60px;
          }
        }
      }
    }
  }

  .list {

    li {

      h2 {
        font-size: (@base-font-size * 1.5);

        time {
          opacity: 1;
          font-size: (@base-font-size * 1.2);
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .navigation li {
    display: block;

    a {
      display: block;
      padding-top: 1em;
      padding-bottom: 1em;
    }
  }
}

// All iOS devices, the easiest way
@media (max-device-width: 480px), (max-device-width: 1024px) {
  .wrapper {
    -webkit-text-size-adjust: none;
  }
}


tweak image display

tweak image display

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


Update help-block style

Update help-block style

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/sonatra/sonatra-theme-gluon.git/'


Set min-height for preview

Set min-height for preview

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


Signup page: media query for title h1

Signup page: media query for title h1

@import "../../node_modules/bootstrap/less/bootstrap";
// Font awesome
@import "../../node_modules/font-awesome/less/font-awesome";
@fa-font-path: "/assets/font-awesome/fonts";
// Open Sans font
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,700);

@import "components/index";
@import "mixins";

@import "pages/reset-password";
@import "pages/login";
@import "pages/migrate";
@import "pages/signup";

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  background-color: #F6F6F6;
  color: #464646;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

h1 {
  font-weight: 500;
  font-size: 3.7rem;
  letter-spacing: 0.05rem;
  text-shadow: rgba(0, 0, 0, 0.6) 0 0.2rem 0.1rem;
}

h2 {
  font-weight: 200;
  font-size: 2.3rem;
  margin: 1rem 0 2.5rem 0;
}

h3 {
  font-weight: 400;
  font-size: 1.6rem;
}

@media (min-width : 451px) {
  h1 {
    font-size: 3.9rem;
  }

  h2 {
    font-size: 2.5rem;
  }
}

.underline {
  text-decoration: underline;
}

.innerForm {
  text-align: center;

  @media (min-width : 451px) {
    text-align: right;
  }
}

@import "../../node_modules/bootstrap/less/bootstrap";
// Font awesome
@import "../../node_modules/font-awesome/less/font-awesome";
@fa-font-path: "/assets/font-awesome/fonts";
// Open Sans font
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,700);

@import "components/index";
@import "mixins";

@import "pages/reset-password";
@import "pages/login";
@import "pages/migrate";
@import "pages/signup";

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  background-color: #F6F6F6;
  color: #464646;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

h1 {
  font-weight: 500;
  font-size: 3.9rem;
  letter-spacing: 0.05rem;
  text-shadow: rgba(0, 0, 0, 0.6) 0 0.2rem 0.1rem;
}

h2 {
  font-weight: 200;
  font-size: 2.5rem;
  margin: 1rem 0 2.5rem 0;
}

h3 {
  font-weight: 400;
  font-size: 1.6rem;
}

.underline {
  text-decoration: underline;
}

.innerForm {
  text-align: center;

  @media (min-width : 451px) {
    text-align: right;
  }
}


adjust icon positioning

adjust icon positioning

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/torx-io/torx-dark-ui.git/'


Update block style

Update block style

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


Stop status bar anchors receiving link styles

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/matthewlucock/really-black-ui.git/'


smaller breadcrumb default font size

smaller breadcrumb default font size

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


Style input[text="url"]

Style input[text="url"]

Previously the "website-field" in usercp/profile was not styled.

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


Change post style

Change post style

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/messier219/mneme.git/'


course card new look styles

course card new look styles

.truncated-keywords {
    font-size: 75%;
    color: #777;
    text-transform: uppercase;
    font-weight: 700;
}

.course-card {
    padding: 0;
    border-radius: 0;
    border: none;
}

.course-image {
    padding: 0;
}

.course-image img {
    width: 100%;
}

.course-card h2.course-card-title {
    margin-top: 5px;
    font-size: 1.5em;
    font-weight: 600;
}

.course-category {
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;

}

error: pathspec 'client/templates/shared/course-card.less' did not match any file(s) known to git


add less folder of myboot

add less folder of myboot

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/smpower/demo.git/'


ui.less common style design

ui.less common style design

html,
body {
    background: #e5e5e5;
}

::selection {
    background: #FF5E99;
    color: #fff;
    text-shadow: none;
}

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


Make the homepage background strech end to end

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/classcentral/class-central.git/'


CRM-5353: adjust position of reset-filter button

@import "oroui/css/less/mixins";
.ui-multiselect-checkboxes{
    overflow-x: visible;
}
.filter-item {
    margin-right: 7px;
    margin-bottom: 7px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
.filter-item .reset-filter:hover [class^='icon-']:before {
    color: #666;
}
.filter-item .reset-filter {
    margin-left: 2px;
    display: inline-block;
    width: 12px;
}
.filter-item .filter-default-value .reset-filter {
    display: none;
}
.filter-select.filter-default-value .multiselect-filter-widget {
    display: inline-block;
}

.filter-box .btn-group [class^='icon-'] {
  padding-top:2px;
  vertical-align:middle;
}
.filter-box .filter-item .disable-filter {
    background-color: #F5F5F5;
    border-bottom-right-radius: 4px;
    border-color: #CCCCCC #CCCCCC #B3B3B3;
    border-style: solid;
    border-top-right-radius: 4px;
    border-width: 1px 1px 1px 0;
    display: inline-block;
    font-size: 18px;
    height: 29px;
    line-height: 29px;
    padding: 2px;
    vertical-align: top;
}

.filter-box .filter-select {
    height: 29px;
}

.filter-box .filter-select .disable-filter {
    margin-left: 3px;
}

.filter-box .filter-item .filter-criteria {
    position: absolute;
    font-size: 12px;
    background-color: #ffffff;
    padding: 8px 8px 2px 8px;
    border: 1px solid #d3d3d3;
    display: none;
    z-index: @oroZindexDropdown;
    margin-top: 7px;
    top: auto;
}
.filter-box .filter-item .filter-criteria select,
.filter-box .filter-item .filter-criteria textarea,
.filter-box .filter-item .filter-criteria input[type="text"],
.filter-box .filter-item .filter-criteria input[type="password"],
.filter-box .filter-item .filter-criteria input[type="datetime"],
.filter-box .filter-item .filter-criteria input[type="datetime-local"],
.filter-box .filter-item .filter-criteria input[type="date"],
.filter-box .filter-item .filter-criteria input[type="month"],
.filter-box .filter-item .filter-criteria input[type="time"],
.filter-box .filter-item .filter-criteria input[type="week"],
.filter-box .filter-item .filter-criteria input[type="number"],
.filter-box .filter-item .filter-criteria input[type="email"],
.filter-box .filter-item .filter-criteria input[type="url"],
.filter-box .filter-item .filter-criteria input[type="search"],
.filter-box .filter-item .filter-criteria input[type="tel"],
.filter-box .filter-item .filter-criteria input[type="color"],
.filter-box .filter-item .filter-criteria .uneditable-input {
    margin-bottom: 10px;

}
.filter-box {
  .filter-item {
    .filter-criteria {
      input[type="text"],
      input[type="datetime"],
      input[type="date"] {
        & + .dropdown-menu-calendar {
          margin-top: -11px;
        }
      }
    }
  }
}
.filter-box .filter-item .filter-criteria .input-append input,
.filter-box .filter-item .filter-criteria .input-prepend input,
.filter-box .filter-item .filter-criteria .input-append select,
.filter-box .filter-item .filter-criteria .input-prepend select,
.filter-box .filter-item .filter-criteria .input-append .uneditable-input,
.filter-box .filter-item .filter-criteria .input-prepend .uneditable-input {
    margin-bottom: 0;
}
.filter-select .select-filter-widget {
    &, &.ui-multiselect {
      font-weight: bold;
      color: #333333;
      padding: 0 0 2px 0;
      background: none;
      border: none;
      margin-left: 0;
    }
}

.filter-select .select-filter-widget .ui-icon {
    margin-top: 2px;
}

.ui-multiselect-menu.select-filter-widget {
    padding: 2px;
}

.ui-multiselect-menu.select-filter-widget ul {
    max-height: 170px;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-close {
    display: none;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label span {
    white-space: nowrap;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes li {
    padding: 0;
}
.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label {
    margin: 0;
    float: left;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes.fixed-li label{
    float: none;
}
.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label.ui-state-hover {
    background-image: none;
    background-color: #EFEFEF;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label.ui-state-active {
    background-image: none;
    background-color: #3875d7;
    color: #ffffff;
}
.ui-multiselect-single .ui-multiselect-checkboxes label {
  line-height:20px;
}
.ui-multiselect-menu.select-filter-widget {
    padding: 0 0 2px 0;
}
.ui-multiselect-menu.select-filter-widget input[type="search"] {
    margin: 0;
}

.ui-multiselect.select-filter-widget span.caret {
    margin-top: 8px;
    margin-right: 8px;
}
.ui-multiselect.select-filter-widget .add-filter-button span.caret {
    border-top-color: #006ACC;
}
.ui-multiselect.select-filter-widget .add-filter-button:hover{
    text-decoration: none;
}
.ui-multiselect-menu.select-filter-widget .ui-multiselect-header {
    padding: 4px 4px 0 4px;
    margin: 0;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-header > div {
    padding: 4px 4px 6px 4px;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-header .ui-helper-reset {
    display: none;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes input[type="checkbox"] {
    margin: 0 6px 5px 5px;
}

.ui-multiselect.filter-list, .ui-multiselect.select-filter-widget {

    background: none;
    border: none;
    font-size: 13px;
    font-weight: bold;
    padding: 9px 0 7px 6px;
    line-height: 1em;
}

.ui-multiselect.select-filter-widget:hover .add-filter-button span.caret {
    border-top-color: #005099; /* @linkColorHover; */
}

.ui-multiselect.select-filter-widget:hover a {
    color: #005099; /* @linkColorHover; */
}

.ui-multiselect.select-filter-widget span.caret {
    margin-top: 5px;
}

.ui-multiselect.filter-list.ui-state-hover {
    color: #032D67;
    text-decoration: underline;
}
button.ui-multiselect.select-filter-widget.ui-state-hover{
    text-decoration: none;
}
.date-visual-element {
    width: 95px;
}
.filter-criteria .dropdown-menu a {
    color:#444;
}
.filter-criteria .dropdown-menu a:hover {
    background:#3875d7;
    color:#444;
    outline: none !important;
}
.filter-criteria .nav-tabs-oro a:hover,
.filter-criteria .nav-tabs-oro a:focus{
    background: #efefef;
    color: #444;
}
.filter-criteria .nav-tabs-oro .active a:hover,
.filter-criteria .nav-tabs-oro .active a:focus{
    background: #fff;
    color: #6d6d6d;
}
.filter-criteria .tab-content a:not(.ui-slider-handle):hover,
.filter-criteria .tab-content a:not(.ui-slider-handle):focus{
    background: transparent;
}
.filter-criteria .datetime-visual-element {
    width: 100px;
}
.fields-row {
  .datefilter + .timepicker-input {
    margin-left: 5px;
  }
}
.filter-criteria:focus {
    outline: none;
}

.ui-multiselect.select-filter-widget {
    width: auto !important;
}

.filter-item-simple .choice-filter > .dropdown,
.filter-item-simple .filter-select {
    display: inline-block;
}
.filter-item-simple .caret {
    display: none;
}
.active-filter .dropdown:after {
    display: inline-block;
}
.active-filter .field-select {
    display: block;
}

.ui-multiselect-menu.multiselect-filter-widget {
    margin-top: 7px;
}
.ui-multiselect.multiselect-filter-widget span,
.filter-item .filter-criteria-hint {
    max-width: 250px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
}

.filter-item .filter-update-empty {
    margin-left: -2px;
}

.filter-criteria {
  .choice-filter {
    .btn-group.btn-block{
      width: auto;
      float: left;
      .dropdown-toggle {
        -webkit-border-radius: 3px 0 0 3px;
        -moz-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
      }
    }
    .value-field-frame {
      position: relative;
      vertical-align: top;
      width: auto;

      input[type=text] {
        max-width: 100%;
        width: 280px;
        height: 29px;
        box-sizing: border-box;
        border-left-width: 0;
        border-right-width: 0;
        margin-bottom: 0;
      }
      .filter-update {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}

.condition-item .select2-container.dictionary-filter{
  display: block;
  max-width: none;
}
.dictionary-filter {

  ul {
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555555;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
  }
}
.filter-item.choice-tree-filter {
  margin-right: 0;
  margin-bottom: 0;
  max-width: 300px;
  min-width: 180px;
  .choice-tree-filter-search{
    width: calc(~"100% - 14px");
  }
  .buttons {
    margin-bottom: 5px;
    span {
      cursor: pointer;
      color: #006acc;
    }
    span.active {
      color: rgb(68, 68, 68);
      cursor: default;
    }
  }
  .list {
    max-height: 200px;
    overflow: auto;
    margin-bottom: 10px;
    ul:first-child{
      margin-left: 0;
    }
    ul {
      list-style-type: none;
      input {
        margin-right: 5px;
        margin-top: 0;
        margin-left: -18px;
      }
      label {
        padding-left: 20px;
        &.search-result {
          color: #000000;
          font-weight: bold;
        }
      }
    }
  }
  input[name="value"] {
    display: none;
  }
}

.filter-container {
    position: relative;
}
.filter-items-hint {
    padding-right: 80px;
    position: relative;

    .reset-filter-button {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.filter-criteria .choice-filter .value-field-frame .dictionary-filter {
  width: 200px;
}

.filter-criteria .choice-filter .value-field-frame .select2-search-field input[type=text] {
  height: 25px;
  padding: 5px;
}

.filter-criteria .choice-filter .select2-container-multi .select2-choices .select2-search-choice {
  margin: 2px 0 2px 5px;
  padding: 3px 20px 3px 7px;
}
.select-field-date-popover {
  top: 3px;
  right: 3px;
  position: absolute;
}
.select-field-date-popover .popover{
  min-width: 350px;
}
.field-condition-date-popover {
  display: inline-block;

  i {
    cursor: pointer;
  }
}

@import "oroui/css/less/mixins";
.ui-multiselect-checkboxes{
    overflow-x: visible;
}
.filter-item {
    margin-right: 7px;
    margin-bottom: 7px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
.filter-item .reset-filter:hover [class^='icon-']:before {
    color: #666;
}
.filter-item .reset-filter {
    margin-left: 2px;
}
.filter-item .filter-default-value .reset-filter {
    display: none;
}
.filter-select.filter-default-value .multiselect-filter-widget {
    display: inline-block;
}

.filter-box .btn-group [class^='icon-'] {
  padding-top:2px;
  vertical-align:middle;
}
.filter-box .filter-item .disable-filter {
    background-color: #F5F5F5;
    border-bottom-right-radius: 4px;
    border-color: #CCCCCC #CCCCCC #B3B3B3;
    border-style: solid;
    border-top-right-radius: 4px;
    border-width: 1px 1px 1px 0;
    display: inline-block;
    font-size: 18px;
    height: 29px;
    line-height: 29px;
    padding: 2px;
    vertical-align: top;
}

.filter-box .filter-select {
    height: 29px;
}

.filter-box .filter-select .disable-filter {
    margin-left: 3px;
}

.filter-box .filter-item .filter-criteria {
    position: absolute;
    font-size: 12px;
    background-color: #ffffff;
    padding: 8px 8px 2px 8px;
    border: 1px solid #d3d3d3;
    display: none;
    z-index: @oroZindexDropdown;
    margin-top: 7px;
    top: auto;
}
.filter-box .filter-item .filter-criteria select,
.filter-box .filter-item .filter-criteria textarea,
.filter-box .filter-item .filter-criteria input[type="text"],
.filter-box .filter-item .filter-criteria input[type="password"],
.filter-box .filter-item .filter-criteria input[type="datetime"],
.filter-box .filter-item .filter-criteria input[type="datetime-local"],
.filter-box .filter-item .filter-criteria input[type="date"],
.filter-box .filter-item .filter-criteria input[type="month"],
.filter-box .filter-item .filter-criteria input[type="time"],
.filter-box .filter-item .filter-criteria input[type="week"],
.filter-box .filter-item .filter-criteria input[type="number"],
.filter-box .filter-item .filter-criteria input[type="email"],
.filter-box .filter-item .filter-criteria input[type="url"],
.filter-box .filter-item .filter-criteria input[type="search"],
.filter-box .filter-item .filter-criteria input[type="tel"],
.filter-box .filter-item .filter-criteria input[type="color"],
.filter-box .filter-item .filter-criteria .uneditable-input {
    margin-bottom: 10px;

}
.filter-box {
  .filter-item {
    .filter-criteria {
      input[type="text"],
      input[type="datetime"],
      input[type="date"] {
        & + .dropdown-menu-calendar {
          margin-top: -11px;
        }
      }
    }
  }
}
.filter-box .filter-item .filter-criteria .input-append input,
.filter-box .filter-item .filter-criteria .input-prepend input,
.filter-box .filter-item .filter-criteria .input-append select,
.filter-box .filter-item .filter-criteria .input-prepend select,
.filter-box .filter-item .filter-criteria .input-append .uneditable-input,
.filter-box .filter-item .filter-criteria .input-prepend .uneditable-input {
    margin-bottom: 0;
}
.filter-select .select-filter-widget {
    &, &.ui-multiselect {
      font-weight: bold;
      color: #333333;
      padding: 0 0 2px 0;
      background: none;
      border: none;
      margin-left: 0;
    }
}

.filter-select .select-filter-widget .ui-icon {
    margin-top: 2px;
}

.ui-multiselect-menu.select-filter-widget {
    padding: 2px;
}

.ui-multiselect-menu.select-filter-widget ul {
    max-height: 170px;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-close {
    display: none;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label span {
    white-space: nowrap;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes li {
    padding: 0;
}
.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label {
    margin: 0;
    float: left;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes.fixed-li label{
    float: none;
}
.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label.ui-state-hover {
    background-image: none;
    background-color: #EFEFEF;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes label.ui-state-active {
    background-image: none;
    background-color: #3875d7;
    color: #ffffff;
}
.ui-multiselect-single .ui-multiselect-checkboxes label {
  line-height:20px;
}
.ui-multiselect-menu.select-filter-widget {
    padding: 0 0 2px 0;
}
.ui-multiselect-menu.select-filter-widget input[type="search"] {
    margin: 0;
}

.ui-multiselect.select-filter-widget span.caret {
    margin-top: 8px;
    margin-right: 8px;
}
.ui-multiselect.select-filter-widget .add-filter-button span.caret {
    border-top-color: #006ACC;
}
.ui-multiselect.select-filter-widget .add-filter-button:hover{
    text-decoration: none;
}
.ui-multiselect-menu.select-filter-widget .ui-multiselect-header {
    padding: 4px 4px 0 4px;
    margin: 0;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-header > div {
    padding: 4px 4px 6px 4px;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-header .ui-helper-reset {
    display: none;
}

.ui-multiselect-menu.select-filter-widget .ui-multiselect-checkboxes input[type="checkbox"] {
    margin: 0 6px 5px 5px;
}

.ui-multiselect.filter-list, .ui-multiselect.select-filter-widget {

    background: none;
    border: none;
    font-size: 13px;
    font-weight: bold;
    padding: 9px 0 7px 6px;
    line-height: 1em;
}

.ui-multiselect.select-filter-widget:hover .add-filter-button span.caret {
    border-top-color: #005099; /* @linkColorHover; */
}

.ui-multiselect.select-filter-widget:hover a {
    color: #005099; /* @linkColorHover; */
}

.ui-multiselect.select-filter-widget span.caret {
    margin-top: 5px;
}

.ui-multiselect.filter-list.ui-state-hover {
    color: #032D67;
    text-decoration: underline;
}
button.ui-multiselect.select-filter-widget.ui-state-hover{
    text-decoration: none;
}
.date-visual-element {
    width: 95px;
}
.filter-criteria .dropdown-menu a {
    color:#444;
}
.filter-criteria .dropdown-menu a:hover {
    background:#3875d7;
    color:#444;
    outline: none !important;
}
.filter-criteria .nav-tabs-oro a:hover,
.filter-criteria .nav-tabs-oro a:focus{
    background: #efefef;
    color: #444;
}
.filter-criteria .nav-tabs-oro .active a:hover,
.filter-criteria .nav-tabs-oro .active a:focus{
    background: #fff;
    color: #6d6d6d;
}
.filter-criteria .tab-content a:not(.ui-slider-handle):hover,
.filter-criteria .tab-content a:not(.ui-slider-handle):focus{
    background: transparent;
}
.filter-criteria .datetime-visual-element {
    width: 100px;
}
.fields-row {
  .datefilter + .timepicker-input {
    margin-left: 5px;
  }
}
.filter-criteria:focus {
    outline: none;
}

.ui-multiselect.select-filter-widget {
    width: auto !important;
}

.filter-item-simple .choice-filter > .dropdown,
.filter-item-simple .filter-select {
    display: inline-block;
}
.filter-item-simple .caret {
    display: none;
}
.active-filter .dropdown:after {
    display: inline-block;
}
.active-filter .field-select {
    display: block;
}

.ui-multiselect-menu.multiselect-filter-widget {
    margin-top: 7px;
}
.ui-multiselect.multiselect-filter-widget span,
.filter-item .filter-criteria-hint {
    max-width: 250px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: bottom;
}

.filter-item .filter-update-empty {
    margin-left: -2px;
}

.filter-criteria {
  .choice-filter {
    .btn-group.btn-block{
      width: auto;
      float: left;
      .dropdown-toggle {
        -webkit-border-radius: 3px 0 0 3px;
        -moz-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
      }
    }
    .value-field-frame {
      position: relative;
      vertical-align: top;
      width: auto;

      input[type=text] {
        max-width: 100%;
        width: 280px;
        height: 29px;
        box-sizing: border-box;
        border-left-width: 0;
        border-right-width: 0;
        margin-bottom: 0;
      }
      .filter-update {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}

.condition-item .select2-container.dictionary-filter{
  display: block;
  max-width: none;
}
.dictionary-filter {

  ul {
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555555;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
  }
}
.filter-item.choice-tree-filter {
  margin-right: 0;
  margin-bottom: 0;
  max-width: 300px;
  min-width: 180px;
  .choice-tree-filter-search{
    width: calc(~"100% - 14px");
  }
  .buttons {
    margin-bottom: 5px;
    span {
      cursor: pointer;
      color: #006acc;
    }
    span.active {
      color: rgb(68, 68, 68);
      cursor: default;
    }
  }
  .list {
    max-height: 200px;
    overflow: auto;
    margin-bottom: 10px;
    ul:first-child{
      margin-left: 0;
    }
    ul {
      list-style-type: none;
      input {
        margin-right: 5px;
        margin-top: 0;
        margin-left: -18px;
      }
      label {
        padding-left: 20px;
        &.search-result {
          color: #000000;
          font-weight: bold;
        }
      }
    }
  }
  input[name="value"] {
    display: none;
  }
}

.filter-container {
    position: relative;
}
.filter-items-hint {
    padding-right: 80px;
    position: relative;

    .reset-filter-button {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.filter-criteria .choice-filter .value-field-frame .dictionary-filter {
  width: 200px;
}

.filter-criteria .choice-filter .value-field-frame .select2-search-field input[type=text] {
  height: 25px;
  padding: 5px;
}

.filter-criteria .choice-filter .select2-container-multi .select2-choices .select2-search-choice {
  margin: 2px 0 2px 5px;
  padding: 3px 20px 3px 7px;
}
.select-field-date-popover {
  top: 3px;
  right: 3px;
  position: absolute;
}
.select-field-date-popover .popover{
  min-width: 350px;
}
.field-condition-date-popover {
  display: inline-block;

  i {
    cursor: pointer;
  }
}


Add source files

Add source files

@color: #1e83d3;

.clearfix() {
  &:after {
    content: ".";
    display: block;
    height:0;
    clear:both;
    visibility: hidden;
  }
}

.nowrap(){
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mobileSelect{
    position: relative;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.4s, z-index 0.4s;
    transition: opacity 0.4s, z-index 0.4s;
    *{
        margin:0;
        padding:0;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .grayLayer{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #eee;
        background: rgba(0, 0, 0, 0.7);
        z-index: 888;
        display: block;
    }
    .content{
        width: 100%;
        display: block;
        position: fixed;
        z-index: 889;
        color: black;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        bottom: -350px;
        left:0;
        background: white;
	    .fixWidth{
            .clearfix();
	    	width:90%;
	    	margin: 0 auto;
	    	position: relative;
	    }
    	.btnBar{
            border-bottom: 1px solid #DCDCDC;
            font-size: 15px;
            height: 45px;
            position: relative;
            text-align: center;
            line-height: 45px;
    		.cancel,.ensure{
                height: 45px;
                width: 55px;
                cursor: pointer;
                position: absolute;
                top: 0;
    		}
    		.cancel{
                left: 0;
                color: #666;
    		}
    		.ensure{
    			right:0;
    			color:@color;
    		}
    		.title{
    			font-size: 15px;
  				padding:0 15%;
    			.nowrap();
    		}
    	}
    	.panel{
    		.clearfix();
    		.wheels{
    			width:100%;
    			height:200px;
    			overflow: hidden;
    		}
    		.wheel{
                position: relative;
                z-index: 0;
                float: left;
                width: 50%;
                height: 200px;
                overflow: hidden;
                -webkit-transition: width 0.3s ease;
                transition: width 0.3s ease;
	    		.selectContainer{
                    display: block;
                    text-align: center;
                    -webkit-transition: -webkit-transform 0.18s ease-out;
                    transition: -webkit-transform 0.18s ease-out;
                    transition: transform 0.18s ease-out;
                    transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
	    			li{
                        font-size: 15px;
                        display: block;
                        height: 40px;
                        line-height: 40px;
                        cursor: pointer;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
	    			}
	    		}
    		}

    		.selectLine{
                height: 40px;
                width: 100%;
                position: absolute;
                top: 80px;
                pointer-events: none;
                -webkit-box-sizing: border-box;
                      box-sizing: border-box;
                border-top: 1px solid #DCDCDC;
                border-bottom: 1px solid #DCDCDC;
    		}

    		.shadowMask{
                position: absolute;
                top: 0;
                width: 100%;
                height: 200px;
                background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
                background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
                background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
                opacity: 0.9;
                pointer-events: none;
    		}
    	}
    }
}

.mobileSelect-show{
    opacity: 1;
    z-index: 10000;
    visibility: visible;
    .content{
		bottom: 0;
    }
}

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


Fix #93 : Remove unused css in catalog.less

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


Update static/vendors/bootstrap/less/mixins/list-group.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

// List Groups

.list-group-item-variant(@state; @background; @color) {
  .list-group-item-@{state} {
    color: @color;
    background-color: @background;

    a& {
      color: @color;

      .list-group-item-heading {
        color: inherit;
      }

      &:hover,
      &:focus {
        color: @color;
        background-color: darken(@background, 5%);
      }
      &.active,
      &.active:hover,
      &.active:focus {
        color: #fff;
        background-color: @color;
        border-color: @color;
      }
    }
  }
}

error: pathspec 'static/vendors/bootstrap/less/mixins/list-group.less' did not match any file(s) known to git


Update static/vendors/bootstrap/less/mixins/pagination.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

// Pagination

.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
  > li {
    > a,
    > span {
      padding: @padding-vertical @padding-horizontal;
      font-size: @font-size;
    }
    &:first-child {
      > a,
      > span {
        .border-left-radius(@border-radius);
      }
    }
    &:last-child {
      > a,
      > span {
        .border-right-radius(@border-radius);
      }
    }
  }
}

error: pathspec 'static/vendors/bootstrap/less/mixins/pagination.less' did not match any file(s) known to git


fix alignment issue

fix alignment issue

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/bmesuere/uni-test.git/'


moving media-queries.less into erdiko until I can re-evaluate

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


Included Inspirespace colors for Admin UI

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/ulrichson/lehner-photography.git/'


BUG: v4skin | kajona-overrides-pe.less -> fixed the z-position of the pe-autocomplete, got hidden behind the global toolbar

@fa-font-path:              "../fonts/fontawesome/font";
@peColorHover:              #9a9a9a;
@peColorHoverBackground:    rgba(154, 154, 154, 0.2);
@peColorBackgroundInactive: #ccc;
@wysiwygOutlineColor:       #afafaf;
@wysiwygOutlineColorHover:  #7b7b7b;
@green:                     #6CB121;
@btn-primary-bg:            @gray-darker;
@gray-darker:               #bfbfbf;

@peButtonToolbarBackground: #5E696D;
@peButtonToolbarBackgroundHover: @green; // #02BAF2;
@peGreenTransparent: rgba(108, 177, 33, 0.48); // #02BAF2;

@border-radius-base:        0px;
@border-radius-small:       0px;
@border-radius-large:       0px;

@peFontFamily:              "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* P O R T A L E D I T O R   T O O L B A R */
.peGlobalToolbar {

    z-index: 4001;
    font-family: @peFontFamily;
    color: #fff !important;
    font-size: 12px;
    position: fixed;
    top: 0;
    right: -200px;
    width: 230px;
    height: 100%;
    display: block !important;
	line-height: 17px;
    background-color: @peButtonToolbarBackground !important;
    overflow-y: auto;

    background-image: url(../img/pusteblume.png);
    background-repeat: no-repeat;
    background-position: 0 bottom;

    padding: 5px;
    transition: 0.5s ease-in-out;

    &.peGlobalToolbarOpen {
        right: 0;
        transition: 0.5s ease-in-out;
    }

    .peToolbarHeader {
        font-size: 20px;

        i {
            cursor: pointer;
        }
    }

    .peGlobalToolbarInfo {
        margin-left: 25px;

        hr {
            border: 0;
            border-bottom: 1px solid #fff;
            margin: 0;
        }

        .peGlobalToolbarInfoRow {

            padding: 5px 0 5px 0;

            .peGlobalToolarbarInfoIcon {
                float: left;
                font-size: 15px;
            }

            .peGlobalToolbarInfoText {
                margin-left: 24px;
            }

            &.peGlobalToolbarActionRow {
                padding: 0;

                .peGlobalToolbarInfoText {
                    margin-left: 22px;
                }

            }

        }
        .peGlobalToolbarInfoLink {
            &:hover {
                background-color: @peButtonToolbarBackgroundHover;
            }

        }
    }
}

/* P O R T A L E D I T O R   C O N T A I N E R */
.peAddButton, .peElementWrapper, [data-systemid] {

    min-height: 10px;

    &:hover {

        //padding-top: 5px; //@jaky: wie kann man das besser machen? es geht darum, dass sich die toolbars von elementen nicht überlagern, z.B. bei der Liste von Faqs

        display: block !important;
        //outline: 1px solid @peColorHover !important;
        //background: @peColorHoverBackground !important;
        outline: 5px solid @peGreenTransparent !important;

        *[data-kajona-editable] {
            outline: 1px dotted @wysiwygOutlineColor;
        }

        &[data-element='block'] {
            outline: 2px solid @wysiwygOutlineColor;
        }

    }

    &.peInactiveElement {
        background-color: @peColorBackgroundInactive;
        .opacity(0.5);
    }

    .peActionToolbar {
        position: absolute;
        display: none;
        z-index: 4000;
        .opacity(1) !important;

        .peActionToolbarActionContainer {
            line-height: 15px;

            background-color: @peButtonToolbarBackground;
            a {
                color: #fff;
                display: inline-block;
                width: 25px;
                text-align: center;
                padding: 5px;
                font-size: 13px;
                font-weight:normal;
                cursor: pointer;
                text-decoration: none;

                i {
                    font-size: 16px;
                }

                &.moveHandle {
                    cursor: move;
                }

                &:hover {
                    text-decoration: none;
                    background-color: @peButtonToolbarBackgroundHover;
                }
            }
        }

        .peActionToolbarCaretBottom {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid @peButtonToolbarBackground;
        }

        .peActionToolbarCaretTop {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid @peButtonToolbarBackground;
        }

        &.caretRight {
            .peActionToolbarCaretBottom {
                float: right;
            }
        }
    }

    &:hover {
         > .peActionToolbar {
            display: block;
        }
    }

}

.peAddButton {
    .peActionToolbar {
        .peActionToolbarActionContainer {
            a {
                width: auto;
                display: block;
                text-align: left;
                font-family: @peFontFamily;
            }
        }
    }
}

/* MOVE / DRAG N DROP */

.peElementMovePlaceholder {
    border: 3px dotted @wysiwygOutlineColor;
    .box-sizing(border-box);
}

.pePlaceholderWrapperDropTarget {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,.05) 8px, rgba(0,0,0,.05) 16px);
    min-height: 50px;
}

.peNewButton {
    margin-bottom: 2px !important;
    display: block !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    cursor: pointer;
    color: @btn-primary-bg;
}

.peContextMenu {
    margin: 0 10px 0;
    background-color: #fff !important;
    border-radius: 0;
    ul {
        padding: 0;
        list-style: none;
        margin: 0;
        border: 1px solid black;
        background-color: #fff !important;
        a {
            display: block;
            color: #000;
            text-decoration: none;
            padding: 4px;

            &:hover {
                background-color: #cccccc !important;
            }
        }
    }
}

/* WYSIWYG Inline Editor */
body *[data-kajona-editable] {
    &:hover,
    &:focus {
        outline: 1px dotted @wysiwygOutlineColorHover;
    }

    &.peFailed {

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peProgressIndicator {

    position: absolute;
    width: 1px;
    height: 1px;

    &.peSaving {
        &:after,
        &:before {
            position: absolute;
            right: -20px;
            top: 0;
            transition: all 1s;
            font-family: fontawesome;
        }

        &:after {
            animation: fa-spin 2s infinite linear;
            font-size: @font-size-base + 10;
            content: @fa-var-spinner;
            color: @green;
        }

        &:before {
            padding: 8px 5px;
            font-size: @font-size-base - 2;
            content: @fa-var-check;
            color: grey;
        }
    }

    &.peSaved {
        &:before {
            color: @green;
        }
        &:after {
            opacity: 0;
        }
    }

    &.peFailed {
        &:after,
        &:before {
            color: red;
        }
        &:before {
            font-size: @font-size-base;
            padding: 8px 6px;
            content: @fa-var-exclamation-circle;
        }
        &:after {
            opacity: 0;
        }

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peLoadingContainer {
    padding: 20px;
    text-align: center;
    overflow: hidden;

    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;

    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;

    &:before {
        font-size: @font-size-base + 10;
        content: @fa-var-spinner;
        color: @green;
        font-family: fontawesome;
    }
}

#peGlobalToolbarPageJump {
    width: 160px;
    background-color: lighten(@peButtonToolbarBackground, 20%);
    border: 1px solid #fff;
    color: #fff;
}

.peGlobalAutocompleteSuggest {
    z-index: 5000;

    background-color: @peButtonToolbarBackground !important;
    .ui-menu-item {
        background-color: @peButtonToolbarBackground !important;
        color: #fff;
        font-size: 12px;

        a {
            color: #fff;
        }
    }

    .ui-state-focus {
        background-color: @peButtonToolbarBackgroundHover;
        background-image: none;
        border-radius: 0;
    }

    .ui-corner-all, &.ui-corner-all {
        border-radius: 0;
    }

    &.ui-widget-content {
        background: none;
        border: 1px solid #fff;
    }
}

.loadingContainerBackground {
    position: absolute;
    left: 50%;
    top: 25%;
    z-index: -1;
}

/* DIALOGS / MODALS / BACKDROPS */
.kajona-pe-wrap {
    .modal {
        text-align: left;

        iframe {
            border: none;
        }

        .modal-header {
            border: none;
            padding: 15px 15px 0 15px;
            h3 {
                margin: 0;
            }
        }

        .modal-footer {
            padding: 0 15px 15px 15px;
            border-top: none;
        }

        .modal-body {
            max-height: none;
        }

        .btn-primary {
            color: #fff;
        }
    }
}

/* TOOLTIPS */
.qtip {
    border-radius: 0 !important;
    box-shadow: 0  2px 10px rgba(0,0,0,.2) !important;

    .qtip-content {
        font-family: @font-family-base !important;
        padding: 4px !important;
        line-height: 120%;
        color: #FFFFFF !important;
        font-size: @font-size-base - 3 !important;
    }
}

@fa-font-path:              "../fonts/fontawesome/font";
@peColorHover:              #9a9a9a;
@peColorHoverBackground:    rgba(154, 154, 154, 0.2);
@peColorBackgroundInactive: #ccc;
@wysiwygOutlineColor:       #afafaf;
@wysiwygOutlineColorHover:  #7b7b7b;
@green:                     #6CB121;
@btn-primary-bg:            @gray-darker;
@gray-darker:               #bfbfbf;

@peButtonToolbarBackground: #5E696D;
@peButtonToolbarBackgroundHover: @green; // #02BAF2;
@peGreenTransparent: rgba(108, 177, 33, 0.48); // #02BAF2;

@border-radius-base:        0px;
@border-radius-small:       0px;
@border-radius-large:       0px;

@peFontFamily:              "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* P O R T A L E D I T O R   T O O L B A R */
.peGlobalToolbar {

    z-index: 4001;
    font-family: @peFontFamily;
    color: #fff !important;
    font-size: 12px;
    position: fixed;
    top: 0;
    right: -200px;
    width: 230px;
    height: 100%;
    display: block !important;
	line-height: 17px;
    background-color: @peButtonToolbarBackground !important;
    overflow-y: auto;

    background-image: url(../img/pusteblume.png);
    background-repeat: no-repeat;
    background-position: 0 bottom;

    padding: 5px;
    transition: 0.5s ease-in-out;

    &.peGlobalToolbarOpen {
        right: 0;
        transition: 0.5s ease-in-out;
    }

    .peToolbarHeader {
        font-size: 20px;

        i {
            cursor: pointer;
        }
    }

    .peGlobalToolbarInfo {
        margin-left: 25px;

        hr {
            border: 0;
            border-bottom: 1px solid #fff;
            margin: 0;
        }

        .peGlobalToolbarInfoRow {

            padding: 5px 0 5px 0;

            .peGlobalToolarbarInfoIcon {
                float: left;
                font-size: 15px;
            }

            .peGlobalToolbarInfoText {
                margin-left: 24px;
            }

            &.peGlobalToolbarActionRow {
                padding: 0;

                .peGlobalToolbarInfoText {
                    margin-left: 22px;
                }

            }

        }
        .peGlobalToolbarInfoLink {
            &:hover {
                background-color: @peButtonToolbarBackgroundHover;
            }

        }
    }
}

/* P O R T A L E D I T O R   C O N T A I N E R */
.peAddButton, .peElementWrapper, [data-systemid] {

    min-height: 10px;

    &:hover {

        //padding-top: 5px; //@jaky: wie kann man das besser machen? es geht darum, dass sich die toolbars von elementen nicht überlagern, z.B. bei der Liste von Faqs

        display: block !important;
        //outline: 1px solid @peColorHover !important;
        //background: @peColorHoverBackground !important;
        outline: 5px solid @peGreenTransparent !important;

        *[data-kajona-editable] {
            outline: 1px dotted @wysiwygOutlineColor;
        }

        &[data-element='block'] {
            outline: 2px solid @wysiwygOutlineColor;
        }

    }

    &.peInactiveElement {
        background-color: @peColorBackgroundInactive;
        .opacity(0.5);
    }

    .peActionToolbar {
        position: absolute;
        display: none;
        z-index: 4000;
        .opacity(1) !important;

        .peActionToolbarActionContainer {
            line-height: 15px;

            background-color: @peButtonToolbarBackground;
            a {
                color: #fff;
                display: inline-block;
                width: 25px;
                text-align: center;
                padding: 5px;
                font-size: 13px;
                font-weight:normal;
                cursor: pointer;
                text-decoration: none;

                i {
                    font-size: 16px;
                }

                &.moveHandle {
                    cursor: move;
                }

                &:hover {
                    text-decoration: none;
                    background-color: @peButtonToolbarBackgroundHover;
                }
            }
        }

        .peActionToolbarCaretBottom {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid @peButtonToolbarBackground;
        }

        .peActionToolbarCaretTop {
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid @peButtonToolbarBackground;
        }

        &.caretRight {
            .peActionToolbarCaretBottom {
                float: right;
            }
        }
    }

    &:hover {
         > .peActionToolbar {
            display: block;
        }
    }

}

.peAddButton {
    .peActionToolbar {
        .peActionToolbarActionContainer {
            a {
                width: auto;
                display: block;
                text-align: left;
                font-family: @peFontFamily;
            }
        }
    }
}

/* MOVE / DRAG N DROP */

.peElementMovePlaceholder {
    border: 3px dotted @wysiwygOutlineColor;
    .box-sizing(border-box);
}

.pePlaceholderWrapperDropTarget {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,.05) 8px, rgba(0,0,0,.05) 16px);
    min-height: 50px;
}

.peNewButton {
    margin-bottom: 2px !important;
    display: block !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    cursor: pointer;
    color: @btn-primary-bg;
}

.peContextMenu {
    margin: 0 10px 0;
    background-color: #fff !important;
    border-radius: 0;
    ul {
        padding: 0;
        list-style: none;
        margin: 0;
        border: 1px solid black;
        background-color: #fff !important;
        a {
            display: block;
            color: #000;
            text-decoration: none;
            padding: 4px;

            &:hover {
                background-color: #cccccc !important;
            }
        }
    }
}

/* WYSIWYG Inline Editor */
body *[data-kajona-editable] {
    &:hover,
    &:focus {
        outline: 1px dotted @wysiwygOutlineColorHover;
    }

    &.peFailed {

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peProgressIndicator {

    position: absolute;
    width: 1px;
    height: 1px;

    &.peSaving {
        &:after,
        &:before {
            position: absolute;
            right: -20px;
            top: 0;
            transition: all 1s;
            font-family: fontawesome;
        }

        &:after {
            animation: fa-spin 2s infinite linear;
            font-size: @font-size-base + 10;
            content: @fa-var-spinner;
            color: @green;
        }

        &:before {
            padding: 8px 5px;
            font-size: @font-size-base - 2;
            content: @fa-var-check;
            color: grey;
        }
    }

    &.peSaved {
        &:before {
            color: @green;
        }
        &:after {
            opacity: 0;
        }
    }

    &.peFailed {
        &:after,
        &:before {
            color: red;
        }
        &:before {
            font-size: @font-size-base;
            padding: 8px 6px;
            content: @fa-var-exclamation-circle;
        }
        &:after {
            opacity: 0;
        }

        @keyframes shake {
            from, to {
                transform: translate3d(0, 0, 0);
            }

            10%, 30%, 50%, 70%, 90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%, 40%, 60%, 80% {
                transform: translate3d(10px, 0, 0);
            }
        }
        animation: shake 2s ease-in-out;
    }
}

.peLoadingContainer {
    padding: 20px;
    text-align: center;
    overflow: hidden;

    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;

    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;

    &:before {
        font-size: @font-size-base + 10;
        content: @fa-var-spinner;
        color: @green;
        font-family: fontawesome;
    }
}

#peGlobalToolbarPageJump {
    width: 160px;
    background-color: lighten(@peButtonToolbarBackground, 20%);
    border: 1px solid #fff;
    color: #fff;
}

.peGlobalAutocompleteSuggest {
    z-index: 1500;

    background-color: @peButtonToolbarBackground !important;
    .ui-menu-item {
        background-color: @peButtonToolbarBackground !important;
        color: #fff;
        font-size: 12px;

        a {
            color: #fff;
        }
    }

    .ui-state-focus {
        background-color: @peButtonToolbarBackgroundHover;
        background-image: none;
        border-radius: 0;
    }

    .ui-corner-all, &.ui-corner-all {
        border-radius: 0;
    }

    &.ui-widget-content {
        background: none;
        border: 1px solid #fff;
    }
}

.loadingContainerBackground {
    position: absolute;
    left: 50%;
    top: 25%;
    z-index: -1;
}

/* DIALOGS / MODALS / BACKDROPS */
.kajona-pe-wrap {
    .modal {
        text-align: left;

        iframe {
            border: none;
        }

        .modal-header {
            border: none;
            padding: 15px 15px 0 15px;
            h3 {
                margin: 0;
            }
        }

        .modal-footer {
            padding: 0 15px 15px 15px;
            border-top: none;
        }

        .modal-body {
            max-height: none;
        }

        .btn-primary {
            color: #fff;
        }
    }
}

/* TOOLTIPS */
.qtip {
    border-radius: 0 !important;
    box-shadow: 0  2px 10px rgba(0,0,0,.2) !important;

    .qtip-content {
        font-family: @font-family-base !important;
        padding: 4px !important;
        line-height: 120%;
        color: #FFFFFF !important;
        font-size: @font-size-base - 3 !important;
    }
}


need mono for ttys

need mono for ttys

@import "./util.less";

.terminal {
  font-size: 12px;
  padding: 8px;
  .monospace;
  div {
    white-space: nowrap;
  }
}

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


Remove unused animated-ellipsis (#15515)

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


Add styling rules for .author-box

Add styling rules for .author-box

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


hi video

hi video

/***** Modal *****/

.modal-backdrop.in {
    filter: alpha(opacity=7);
    opacity: 0.7;
}

.modal-content {
    background: none;
    border: 0;
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

.modal-body {
    padding: 0 25px 25px 25px;
}

.modal-header {
    padding: 25px 25px 15px 25px;
    text-align: right;
}

.modal-header, .modal-footer {
    border: 0;
}

.modal-header .close {
    float: none;
    margin: 0;
    font-size: 36px;
    color: #fff;
    font-weight: 300;
    text-shadow: none;
    opacity: 1;
}

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