.title is called .page now

.title is called .page now

@import 'lib';

@media (min-width: @desktop) {
    #site-header {
        height: 110px;
        #search,
        #search-q {
            width: 175px;
        }
        #search-q {
            .border-radius(3px);
            .box-shadow(0 1px 0 rgba(255,255,255,.1),
                        0 1px 0 rgba(0,0,0,.5) inset,
                        0 1px 1px rgba(0,0,0,.5) inset);
            font-size: 14px;
            font-weight: 300;
            margin-top: -15px;
            position: absolute;
            top: 50%;
            right: 0;
            &:-moz-placeholder {
                color: lighten(#48535d, 15%);
            }
            &::-moz-placeholder {
                color: lighten(#48535d, 15%);
            }
            &::-webkit-input-placeholder {
                color: lighten(#48535d, 15%);
            }

        }
    }
    #page {
        padding-top: 110px;
    }
    .incompatible-browser.active {
        top: 110px;
    }

    // TODO: These are temporary styles. Davor, remove this with bug 811356.
    .search {
        #page {
            &:before {
                background: @grain-src #566773;
                background-size: 100px 100px;
                border-bottom: 1px solid rgba(0,0,0,.2);
                content: "";
                display: block;
                position: fixed;
                top: 110px;
                height: 40px;
                width: 100%;
                z-index: 3;
            }
        }
        .incompatible-browser.active {
            top: 151px;
        }
    }

    // The logo is permanent in the header.
    #site-header h1.page {
        display: none;
    }

    .force-mobile #site-header > section,
    #site-header nav,
    #search {
        height: 100%;
    }

    #search {
        display: block;
        position: absolute;
        right: 70px;
    }

    #site-header, .classic-header {
        .box-shadow(~'0 -1px 0 rgba(0,0,0,.15) inset, 0 1px 0 rgba(255,255,255,.1) inset');
        background: darken(#3f4f5b, 5%) @grain-src;
        background-size: 100px 100px;
    }

    body, .home {
        #site-header h1.site {
            background: url(../../img/mkt/logos/large.png) 0 50% no-repeat;
            text-indent: -9999px;
            height: 100%;
            left: 0;
            max-width: 280px;
            top: 0;
            width: 280px;
            a {
                display: block;
                height: 100%;
                width: 100%;
            }
        }
    }
    .header-button {
        float: none;
        position: absolute;
        top: 50%;
        margin-top: -25px;
        right: 0;
        width: 50px;
        &:after,
        &.back,
        &.home {
            display: none !important;
        }

        // TODO: These are temporary styles. Davor, remove this with bug 811356.
        &.filter,
        &.expand {
            margin-top: 50px;
        }
        &.filter {
            color: @black;
        }
        &.expand {
            margin-right: 50px;
        }

        &.settings {
            display: block;
        }
        &.browserid {
            .transition(.2s background);
            background-position: 50% 0;
            display: block;
            height: 100%;
            line-height: 110px;
            margin: 0;
            top: 0;
            width: 60px;
            &.loading-submit {
                -webkit-animation-duration: 1.5s;
                -webkit-animation-name: spin;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                background: url(../../img/mkt/loading-16.png) center no-repeat;
                text-indent: -9999px;
                &:after {
                    display: none;
                }
            }
        }
    }
    // TODO: These are temporary styles. Davor, remove this with bug 811356.
    #search-results {
        padding-top: 45px;
        .listing {
            border-top: 1px solid @light-gray;
        }
    }
}

@media screen and (min-width: @desktop),
       @retina {
    body, .home {
        #site-header h1.site {
            background-image: url(../../img/mkt/logos/large-2x.png);
            background-size: 280px auto;
        }
    }
}

@import 'lib';

@media (min-width: @desktop) {
    #site-header {
        height: 110px;
        #search,
        #search-q {
            width: 175px;
        }
        #search-q {
            .border-radius(3px);
            .box-shadow(0 1px 0 rgba(255,255,255,.1),
                        0 1px 0 rgba(0,0,0,.5) inset,
                        0 1px 1px rgba(0,0,0,.5) inset);
            font-size: 14px;
            font-weight: 300;
            margin-top: -15px;
            position: absolute;
            top: 50%;
            right: 0;
            &:-moz-placeholder {
                color: lighten(#48535d, 15%);
            }
            &::-moz-placeholder {
                color: lighten(#48535d, 15%);
            }
            &::-webkit-input-placeholder {
                color: lighten(#48535d, 15%);
            }

        }
    }
    #page {
        padding-top: 110px;
    }
    .incompatible-browser.active {
        top: 110px;
    }

    // TODO: These are temporary styles. Davor, remove this with bug 811356.
    .search {
        #page {
            &:before {
                background: @grain-src #566773;
                background-size: 100px 100px;
                border-bottom: 1px solid rgba(0,0,0,.2);
                content: "";
                display: block;
                position: fixed;
                top: 110px;
                height: 40px;
                width: 100%;
                z-index: 3;
            }
        }
        .incompatible-browser.active {
            top: 151px;
        }
    }

    // The logo is permanent in the header.
    #site-header h1.title {
        display: none;
    }

    .force-mobile #site-header > section,
    #site-header nav,
    #search {
        height: 100%;
    }

    #search {
        display: block;
        position: absolute;
        right: 70px;
    }

    #site-header, .classic-header {
        .box-shadow(~'0 -1px 0 rgba(0,0,0,.15) inset, 0 1px 0 rgba(255,255,255,.1) inset');
        background: darken(#3f4f5b, 5%) @grain-src;
        background-size: 100px 100px;
    }

    body, .home {
        #site-header h1.site {
            background: url(../../img/mkt/logos/large.png) 0 50% no-repeat;
            text-indent: -9999px;
            height: 100%;
            left: 0;
            max-width: 280px;
            top: 0;
            width: 280px;
            a {
                display: block;
                height: 100%;
                width: 100%;
            }
        }
    }
    .header-button {
        float: none;
        position: absolute;
        top: 50%;
        margin-top: -25px;
        right: 0;
        width: 50px;
        &:after,
        &.back,
        &.home {
            display: none !important;
        }

        // TODO: These are temporary styles. Davor, remove this with bug 811356.
        &.filter,
        &.expand {
            margin-top: 50px;
        }
        &.filter {
            color: @black;
        }
        &.expand {
            margin-right: 50px;
        }

        &.settings {
            display: block;
        }
        &.browserid {
            .transition(.2s background);
            background-position: 50% 0;
            display: block;
            height: 100%;
            line-height: 110px;
            margin: 0;
            top: 0;
            width: 60px;
            &.loading-submit {
                -webkit-animation-duration: 1.5s;
                -webkit-animation-name: spin;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                background: url(../../img/mkt/loading-16.png) center no-repeat;
                text-indent: -9999px;
                &:after {
                    display: none;
                }
            }
        }
    }
    // TODO: These are temporary styles. Davor, remove this with bug 811356.
    #search-results {
        padding-top: 45px;
        .listing {
            border-top: 1px solid @light-gray;
        }
    }
}

@media screen and (min-width: @desktop),
       @retina {
    body, .home {
        #site-header h1.site {
            background-image: url(../../img/mkt/logos/large-2x.png);
            background-size: 280px auto;
        }
    }
}


included icons into style.less

included icons into style.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/Zaku-eu/colourco.de.git/'


Add ODI styles

Add ODI styles

/*
  © 2013 Open Data Institute

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/* import bootstrap this way so that we can alter variables just for this app */
@import "bootstrap";

// RESPONSIVE CLASSES
// ------------------

@import "responsive-utilities.less";

// MEDIA QUERIES
// ------------------

// Large desktops
@import "responsive-1200px-min.less";

// Tablets to regular desktops
@import "responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "responsive-navbar.less";

// use our own grey for the input field
@gray: @odiGrey;
@placeholderText: @odiGreyLight;
@inputBorderRadius: 2px;

// todo - use bigger size instead
// @gridColumns:             12;
// @gridColumnWidth:         70px;
// @gridGutterWidth:         30px;
// @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

@odiBlue: #00b7ff;
/* odiBlueLight - primarily for background of inputs in modals */
@odiBlueLight: lighten(@odiBlue, 15%);
@odiBlueLighter: lighten(@odiBlue, 36%);
@odiBlueDark: darken(@odiBlue, 5%);
@odiBlueDarker: darken(@odiBlue, 20%);

@odiRed: #ff6700;
@odiRedDark: darken(@odiRed, 3%);
@odiRedLight: lighten(@odiRed, 15%);

@odiCrimson: #d30102;
@odiCrimsonDark: darken(@odiCrimson, 6%);
@odiCrimsonLight: lighten(@odiCrimson, 53%);

@odiOrange: #f99C06;
@odiOrangeDark: darken(@odiOrange, 6%);
@odiOrangeLight: lighten(@odiOrange, 39%);

@odiGreen: #0DBC37;
@odiGreenDark: darken(@odiGreen, 6%);

@odiPomegranate: #dc4810;
@odiPomegranateDark: darken(@odiPomegranate, 3%);

@odiGrey: #aaa;
@odiGreyDark: darken(@odiGrey, 18%);
@odiGreyDarker: darken(@odiGrey, 40%);
@odiGreyLight: lighten(@odiGrey, 25%);
@odiGreyLighter: lighten(@odiGrey, 40%);

@btnPrimaryBackground: @odiRed;
@btnPrimaryBackgroundHighlight: @odiRed;
@btnInfoBackground:  @odiBlue;
@btnInfoBackgroundHighlight: @odiBlue;

@odiGrey: #8e8c8c;

@basic: @odiBlue;
@pilot: @odiBlue;
@standard: @odiBlue;
@exemplar: @odiBlue;

// @headingsFontFamily:    'Open Sans',sans-serif;
// @headingsFontWeight:    400;

// todo - use bigger size instead
// @gridColumns:             12;
// @gridColumnWidth:         70px;
// @gridGutterWidth:         30px;
// @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

/*
//
// ***** Modal - Create certificate *****
//
*/
.modal {

  &.embed-code {

    .btn-info {

      padding: 10px 20px;
      font-size: 18px;
      float: right;

    }

    h4 {
      color: white;
      font-size: 30px;
      text-align: center;
      margin-top: 20px;
      a {
        color: white;
      }
    }

    textarea {
      margin-bottom: 15px;
    }

    .span6:first-child {
      border-right: thin white solid;
    }

    .span6 div:first-child {
      margin-left: 138px;
    }

    .span6:last-child p:first-child {
      text-align: center;
    }

  }

  background: @odiBlue;
  width: 788px;
  margin-left: -394px;
  .border-radius(0);

  h1 {

    margin-top: -7px;
    margin-bottom: 40px;
    font-size: 30px;
    color: #2f2f2f;

  }

  p { color: #fff; font-size: 20px; }

  .btn-large { width: 100%; .box-sizing(border-box); margin: 12px 0; }

  form { margin-bottom: 0; }

  .form-field-inline {
    label {
      display: inline-block;
    }
    .forgot-password {
      display: block;
      color: black;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

}

.modal-header {

  border-bottom: 0;
  margin: 30px 30px 10px;
  padding: 0;

  h3 {

    color: #fff;
    font-size: 36px;
    font-weight: normal;

  }

}

.modal-body {

  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 40px;
  padding-top: 30px;

}

.modal-body {

  .btn-info { background: @odiBlueDark; }
  .btn-info:active, .btn-info:hover, .btn-info:focus { background: @odiBlueDarker; }

  .log-in {

    background: url(../img/modal-divider.gif) repeat-y top right;

    label {

      color: #fff;
      font-size: 20px;
      height: auto;

    }

    .form-field {

      margin-bottom: 10px;

      input[type=email], input[type=password] {

        margin-top: 5px;
        background: @odiBlueLight;
        border: 1px solid #fff;
        .border-radius(0);
        width: 93%;
        height: 60px;
        padding: 0 10px;
        font-size: 20px;
        color: #fff;

      }

    }

    .form-field-inline {

      float: left;
      margin: -4px 0 0 0;

      input[type=checkbox] { margin: -2px 0 0 0; height: auto; }

      label { font-size: 14px; color: #2f2f2f; display: inline; }
      label:hover { text-decoration: underline; }

      .forgot-password {

        display: block;
        font-size: 14px;
        color: #2f2f2f;
        margin-left: 17px;

      }

    }

    /* Sign in button used on many pages as orange primary button */
    /* Needs to be overridden to be blue info button in modals */
    .btn-primary {

      background: @odiBlueDark;
      height: auto;
      padding: 10px 20px;
      float: right;
      margin: -5px 22px 5px 0;
      font-size: 18px;
      font-weight: bold;

    }

    .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

      background: @odiBlueDarker;

    }

    .sign_in_user_form_errors {
      width: 93%;
    }

  }

}

// a button has been clicked and loading the next
.btn.btn-confirmed{
  &,&:hover{
    #gradient > .striped(@btnPrimaryBackground);
  }
}

/************************************************
    Bootstrap --> Rails
************************************************/

// display error messages in alert block
#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

/************************************************
    ODI Styling
************************************************/
// source https://github.com/theodi/less-rails-bootstrap/blob/master/vendor/frameworks/twitter/bootstrap/odi.less

// mobile - make some elements snap to the sides
@media (max-width: 767px) {
  .whiteout, header, footer{
    margin:0 -20px;
    padding:0 20px;
  }
}

// Global styles //

body {
  background-color: #fff;
  font-size: 18px;
}

// Typography //

h1 {
  font-weight: normal;
}

p {
  font-size: 18px;
  line-height: 24px;
}

.lead p,
p.lead {
  font-size: 17px;
  color: @odiGrey;
  margin-bottom: 30px;
}

dl {
  margin: 0 0 45px;
}

dt, dd {
  margin: 15px 0;
}

dd {
  margin-bottom: 30px;
}

// make grey input text read easier
input, textarea{
  -webkit-font-smoothing: antialiased;
  .box-shadow(none);
}

.btn-small {
  &, &:active, &:hover, &:focus {
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

.btn-info {
  background: @odiBlue;

  &.btn-unstyled {
    &, &:active, &:hover, &:focus {
      font-size: 15px;
      color: @odiBlue;
      padding: 0;
      background: none;
    }
  }

  &:active, &:hover, &:focus {
    background: @odiBlueDark;
  }
}

.btn-info-modal {
  background: @odiBlueDark;
}

.btn-info-modal:active, .btn-info-modal:hover, .btn-info-modal:focus {
  background: @odiBlueDarker;
}

.btn-primary {
  background: @odiRed;
}

.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background: @odiRedDark;
}

.btn-large {
  font-size: 18px;
  padding: 10px 20px;
}

.btn-small, .btn-small:active, .btn-small:hover {
  padding: 3px 25px;
  font-size: 13px;
  color: white;
  border: none;
  text-shadow: none;
}

// snap the header to the top when it's affixed
header.affix {
    top: 0px;
    width:100%;
    z-index:10;
}

#padd {
  .container {
    margin-top: 50px;

    h1 {
      font-size: 70px;
      line-height: 76px;
      color: @odiGrey;
      margin-bottom: 22px;
      margin-top: 35px;
    }

    h2 {
      font-size: 30px;
      line-height: 40px;
      margin-bottom: 40px;
      color: @odiGrey;
      padding-left: 3px;

      strong {
         color: @odiGreyDark;
      }

    }
  }

  .btn {
    display: block;
    margin-bottom: 20px;
  }

  button.btn {
    width: 100%;
  }
}

.odi-bleed {
  background:#fff url("../img/splat.png") no-repeat top left fixed;
  background-position: center -450px;
}

.home {
  text-align: center;

  /* Remove bottom padding so background image can hit bottom */
  padding-bottom: 0;

  h1 {
    color: @odiBlueDarker;
    font-size: 36px;
    margin-bottom: 30px;
    text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);
  }

  .steps {

    /* Background stripes (image has 30px of space on left to align) */
    background: url(../img/background-home-header.gif) repeat-y center;

    .span4 {

      /* Make sure there's a gap between bottom of steps text and top of ODI logo/buttons */
      padding-bottom: 20px;

    }

  }

  .span4 {

    // padd in the content
    h2, p{
      padding: 0 20px;
    }
    p{
      padding-bottom:20px;
    }

    h2 {
      font-size: 70px;
      color: @odiBlueDarker;
      font-weight: bold;
      text-shadow: -1px -1px 0px rgba(255,255,255, 0.25);

      small {
        display: block;
        color: #fff;
        font-size: 30px;
        padding: 30px 0 10px;
        text-shadow: none;
      }
    }

    form {
      margin: 0;

      .btn {
        position: relative;
        top: 40px;
      }
    }
  }
}

.home-header-buttons {

  .row {

    height: 88px;

  }

  .span4 {
    text-align: center;

    .logo {

      /* Small ODI logo, hide text */
      background: url(../img/ODI_kitemark-75x75.png) no-repeat center;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: -34px auto 0 auto;
      width: 76px; height: 68px;

    }

    .btn-primary {
      margin-top: -20px;
    }
  }
}

.homepage-about-content {

  h2 {
    font-weight: normal;
  }

  h2.about-certificate { margin-top: -7px; }

  h2.about-odi {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 25px;
  }
}

h3 {
  font-size: 19px;
}

h4 {
  font-size: 16px;
  font-weight: normal;
  color: @odiGrey;
  margin-bottom: 15px;
}

hr {
  margin: 12px 0;
}

hr.heavy {
  border: 0;
  height: 5px;
  background: url(divider.png);
}

// Layout //

.container {
  padding: 0 inherit;
}

.navbar-inner {
  padding: 0;
  height: 60px;

  .label a {
    color: #fff;
  }

  .label a:hover {
    color: @odiBlueDarker;
    text-decoration: none;
  }
}

#topbar {
  background: #1b1b1b;

  ul {
    border-right: 1px solid #707070;

    li {
      margin: 0;
      padding:0;
      height: 60px;
      border-left: 1px solid #707070;

      a {
        color: #fff;
        padding: 20px;
      }

      a:hover, a.active {
        background-color: @odiRed;
      }
    }
  }

  .label {
    top: -15px;
    position: relative;
    padding-top: 10px;
    background-color: @odiBlue;
  }
}

#mainnav {
  margin-bottom: 0;
  position: relative;
  background-color: rgba(255,255,255,0.65);

  .navbar-inner {
    background: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-bottom: none;
    background-image: none;

    li {
      position: relative;

      a, button {
        background-color: transparent;
        border: none;
        color: #000;
        padding: 20px;
        font-size: 18px;
        text-shadow: 0 1px 0 #ffffff;
      }
      a:hover, button:hover {
        color: @odiBlue;
      }

      form {
        margin: 0;
      }
    }

    li.active a, li.active button {
      color: @odiBlue;
    }

    .arrow-down {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #fff;
      margin: 0 0 0 -8px;
      position: absolute;
      left: 50%;
    }
  }
}

.odi-bleed .navbar .brand {
      padding-top: 15px;
    }

.navbar .nav > .active > a {
  &, &:hover, &:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

nav .dropdown-menu-button {
  z-index: 10;
  position: relative;
}

#login, #register {
  display: none;
  position: absolute;
  right: 0;
  width: 450px;
  padding: 30px 25px;
  background: @odiRed;
  color: white;

  label {
    font-size: 19px;
    margin-bottom: 10px;
  }

  input[type="text"], input[type="email"], input[type="password"] {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    background: @odiRedLight;
    height: 60px;
    padding: 0 10px;
    width: 425px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 20px;
  }

  .form-field-inline {
    float: left;
    margin: 3px 0 0 0;

    input[type=checkbox] { margin: -2px 0 0 0; }

    label { font-size: 14px; color: #fff; display: inline; }
    label:hover { text-decoration: underline; }

    .forgot-password {

      display: block;
      font-size: 14px;
      color: #fff;
      margin: 0 0 0 17px;
      padding: 0;

    }

  }

  h2 {
    line-height: 30px;
  }

  .btn-primary {
    float: right;
    background: @odiPomegranate;
    font-size: 18px;
    padding: 10px 20px;
    margin-right: 3px;

  }

  .btn-primary:active, .btn-primary:hover, .btn-primary:focus {

    background: @odiPomegranateDark;

  }

  &.active {
    display: block;
  }
}

.registration_form_errors .alert-box, .sign_in_user_form_errors .alert-box {
  i {
    display: inline-block;
  }
  h3 {
    display: inline;
  }
}

header {
  background-color: @odiBlue;
  color: #fff;
  padding: 10px 0;

  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;

  .container {
    min-height: 60px;
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:normal;
  }
}

.container.main {
  margin-top: 50px;
}

#footer {
  background-color: #000;
  font-size: 0.88em;
  color: #adaeaf;
  padding-top: 40px;
  padding-bottom: 52px;

  .footer-content {

    margin-left: 0;

    h1 {

      /* ODI logo, hide text */
      background: url(../img/logo-footer.png) no-repeat top left;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      margin: 0 0 30px 0;
      width: 204px; height: 49px;

      a { display: block; }

    }

  }
  .footer-nav { margin-left: 30px; }

  a {
    color: #adaeaf;
    text-decoration: none;
  }

  a:hover { color: #fff; }

  ul {
    list-style: none outside none;
    margin: -4px 0 0 0;

    li {
      display: inline;
      margin-left: 20px;
    }
  }

  p {
    margin: 0px;
    font-size: 16px;
  }

  p.license { margin-top: 30px; }

}

section {
  //background-color: white;
  // margin: 15px 0;
  // padding: 10px 0;
}

.whiteout {
  background-color:rgba(255,255,255,0.65);

  /* Make sure there's a gap between bottom of content and top of footer */
  padding-bottom: 55px;

}

.hero-unit {
  background: none;
  padding: 0;
  margin: 0;

  .centered {
    margin-left: auto;
    margin-right: auto;
  }

  h1, h2, p, small, span {
    text-align: center;
  }

  h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }

  p {
    font-size: 23px;
    line-height: 32px;
  }
}

// Alert messages //

.flash {
  margin-top: 20px;
}

.alert {
  color: white;
  padding: 14px 12px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  vertical-align: middle;

  .icon-large {
    margin-bottom: 1px;
    margin-right: 6px;
    vertical-align: middle;
  }

  .close, .close:hover, .close:active {
    opacity: 1;
    width: 14px;
    height: 14px;
    position: static;
    background-image: url(../img/glyphicons-halflings-white.png);
    background-position: -312px 0;
  }
}

.alert-alert {
  background: @odiCrimson;
  border: 1px solid @odiCrimsonDark;
}

.alert-warning {
  background: @odiOrange;
  border: 1px solid @odiOrangeDark;
}

.alert-notice {
  background: @odiGreen;
  border: 1px solid @odiGreenDark;
}

#topbar .alert-box {
  h3 {
    display: inline;
    line-height: 20px;
    vertical-align: middle;
  }

  ul {
    border: none;

    li {
      height: auto;
      font-size: 16px;
      border: none;
    }
  }
}

// Icons //

.icon-large {

  width: 28px;
  height: 28px;
  background-image: url(../img/glyphicons.png);

  &.icon-white {
    background-image: url(../img/glyphicons_white.png);
  }

  // Spacing between icons in file
  @spacing: -48px;

  // Mixin to help select correct icon
  .icon-position(@top, @left) {
    background-position: @spacing * @left (@spacing * @top) + 1;
  }

  &.icon-ok-sign { .icon-position(19, 3); }
  &.icon-info-sign { .icon-position(19, 5); }
  &.icon-exclamation-sign { .icon-position(19, 6); }
  &.icon-ban-circle { .icon-position(19, 9); }
}

// Tables //

table {
  width: 100%;
  font-size: 15px;
}

th {
  font-weight: normal;
}

// Forms //

.main-default {
  margin-top: 30px;

  .form-field {
    .clearfix;
    margin-bottom: 35px;

    &.form-field-inline {
      input {
        margin: 0 10px;
        height: 30px;
      }
      label {
        display: inline;
      }
    }
  }

  input {
    height: 60px;
    font-size: 20px;
    padding: 0 10px;
    margin: 15px 0;
  }

  input[type='submit'] {
    margin: 15px 0 30px;
  }

  label {
    font-size: 22px;
  }

  i {
    font-size: 15px;
    font-style: normal;
    color: @odiGrey;
    display: block;
  }
}

// User auth //

.user-links {
  .clearfix;
  margin-bottom: 15px;

  .btn {
    float: left;
    margin-right: 4px;
  }
}

// My certificates view //

.first-response-set {
  background: @odiBlueLighter;

  td.level {
    text-align: center;
    padding: 13px 30px 5px 15px;
    width: 48px;
  }

  td.last-updated {
    time {
      color: @odiGreyDarker;
    }
  }

  button.copy-certificate {
    padding: 8px 12px;
  }
}

.previous-response-set {

  td {
    height: 30px;
  }

  button.copy-certificate {
    text-align: left;
    position: relative;
    top: 7px;
  }
}

button.copy-certificate {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;

  span {
    display: block;
    font-size: 12px;
    font-weight: normal;
  }
}

button.copy-certificate:hover {
  font-size: 15px;
}

th.previous-title {
  font-size: 16px;
  text-align: left;
  color: @odiGreyDark;
  padding: 15px 0;
}

td.level {
  .certificate-badge {
    margin: 0 auto;
    width: 50px;
    height: 40px;
  }

  font-size: 12px;
  font-weight: bold;
  color: @odiGreyDark;
}

td.last-updated {
  width: 180px;
  font-size: 12px;
  line-height: 17px;
  color: @odiGreyDark;

  time {
    font-size: 15px;
    display: block;
  }
}

td.status {
  width: 300px;
  font-size: 15px;

  &.published {
    color: @odiCrimson;
  }

  &.archived {
    color: @odiGreyDark;
  }

  &.editing {
    color: @odiGreyDarker;
    font-style: italic;
  }
}

td.action {
  width: 150px;

  form {
    margin: 0;
  }
}

// Questionnaire (survey) view //

#surveyor{

  padding-top:20px;

  header {
    margin:5px 0;
    h3{
      font-size: 27px;
    }
    h3, h4{
      color:@white;
      margin:0;
    }

    &.inactive{
      background-color:@odiGrey;
    }
    cursor: pointer;

    .transition(background-color 0.25s);

    // override
    .container{
      min-height: auto;
    }
  }

  .subsection-label{
    border-top:1px solid @odiGreyLighter;
    color:@odiBlue;
    font-weight: normal;
    padding:20px 0;
  }

  ol,ul{
    margin:auto;
  }

  // brought in from main styles
  label {
    font-size: 22px;
    line-height: 30px;
  }

  .choice input{
    margin-right:10px;
  }
  .choice label{
    font-size:16px;
    color:@gray;
    -webkit-font-smoothing: antialiased;
    line-height: 20px;
    a {
      color: @gray;
      text-decoration: none;
      border-bottom: thin dotted #8E8C8C;
      &:hover, &:focus {
        border-bottom-style: solid;
      }
    }
  }

  input.string{
    height: 60px;
    font-size: 23px;
    padding: 0 10px;
    margin: 15px 0;
  }

  // custom
  input.string{
    width:100%;
  }

  // this is our label replacement (for the question of multiple answers)
  .group_label{
    font-size: 22px
  }

  label small,
  .group_label small{
    color:@odiGrey;
    font-size: 65%;
  }

  // dropdowns
  fieldset.q_dropdown{
    legend{
      display: none;
    }
    > ol > label {
      display: block;
    }
  }

  // repeated sections
  fieldset.g_repeater{
    legend {
      display: none;
    }
    ol fieldset.row {
      display: block;
    }
  }

  fieldset.requirement_basic li {
    background: @odiRed;
    color: white;
    padding: 20px 20px 10px;
  }

  fieldset.requirement_pilot,
  fieldset.requirement_standard,
  fieldset.requirement_exemplar {
    display: none;
    position: relative;

    img{
      position: absolute;
      left: -70px;
      top: 10px;
    }
  }

  fieldset.question-row{
    position: relative;
    padding-top: 10px;

    &.active {

      // hard to do the odd outline

      // outline: 1px solid @odiBlueLight;
      background-color: @odiBlueLighter;
    }

    aside{
      display:none;
      position:absolute;
      right:0;
      background-color:@odiBlueLighter;
      padding:20px;
      width:330px;

      &.answer-meta {
        top: 10px;
      }
    }
  }

  &.highlight-mandatory{
    .mandatory{
      background-color:@odiOrangeLight;
      &.has-response{
        background-color:@white;
        &.active{
          background-color:@odiBlueLighter;
        }
      }
    }
  }

}

#status_panel{
  .transition(right 0.5s);
  background-color:@odiGreyLighter;
  position: absolute;
  right:0;
  width:280px;
  padding:20px;
  height:100%;
  z-index:5;

  right:-320px;

  // also .hover for oldie fallback
  &:hover, &.hover, &.stick{
    right:0px;
  }

  &.affix, &.affix-bottom{
    position: fixed;
    top:130px;
  }

  #panel_handle{
    background-image:url(../img/panel-handle.png);

    &.attained-basic{
      background-image:url(../img/panel-handle-basic.png);
    }
    &.attained-pilot{
      background-image:url(../img/panel-handle-pilot.png);
    }
    &.attained-standard{
      background-image:url(../img/panel-handle-standard.png);
    }
    &.attained-exemplar{
      background-image:url(../img/panel-handle-exemplar.png);
    }

    width:78px;
    height:72px;
    position: absolute;
    left:-78px;
  }

  h3 {
    margin-bottom: 0;
    display: inline;
    width: 50%;
  }

  img {
    display: inline;
    float: right;
    margin-top: 10px;
  }

  .progress {
    margin-bottom: 10px;
    clear: both;
  }

  .status_texts {
    dd,dt{
      display:none;
      &.active{
        display:block;
      }
    }
  }
}

// Certificate view //

.certificate-data {
  ul {
    .clearfix;
    margin-left: 0;
  }

  li {
    list-style-type: none;
    margin: 5px 0;
    width: 50%;
    float: left;

    h4 {
      margin-bottom: 5px;
    }

    p {
      font-size: 19px;
      margin-right: 20px;
      max-height: 24px;

      a {
        color: inherit;
      }

      .cropped {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.certificate.hero-unit {
  margin: -50px auto 30px;
  padding: 0 15px;

  .btn-info {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 12px;
    width: 80px;
    margin-top: 80px;
  }
}

.certificate-summary {
  padding: 0 90px;
}

.certificate-badge {
  width: 160px;
  height: 140px;
  // background: #bbb;
  margin-bottom: 10px;
  background: transparent center center no-repeat;
  background-size:contain;
}

.certificate-level {
  font-weight: bold;
  font-size: 24px;
  color: black;
  margin-bottom: 30px;

  small {
    display: block;
    font-weight: normal;
    font-size: 17px;
    line-height: 16px;
  }
}

strong.certificate-level {
  font-weight: normal;
}

.level-styles(@color, @url){
  .certificate-badge {
    background-image:@url;
  }
  strong.certificate-level {
    color: @color;
  }
}

.basic-level {
  .level-styles(@basic, url(../img/badges/raw_level_badge.png));
}
.pilot-level {
  .level-styles(@pilot, url(../img/badges/pilot_level_badge.png));
}
.standard-level {
  .level-styles(@standard, url(../img/badges/standard_level_badge.png));
}
.exemplar-level {
  .level-styles(@exemplar, url(../img/badges/exemplar_level_badge.png));
}

.footer {
    border-top: 1px solid #E5E5E5;
    margin-top: 70px;
    padding: 30px 0;
    text-align: center;
}

// Embedded certificate //

#embedded-certificate {
  margin: 30px;
  .certificate.hero-unit {
    width: auto;
    margin-top: 30px;
  }
}

.embed-code {
  textarea {
    box-sizing: border-box;
    width: 300px;
  }
}

/*
//
// ***** About Page *****
//
*/
.container.about {

  .span8 {

    margin-left: 0;

    h1 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;

    }

    h2 {

      color: #8e8c8c;
      font-size: 22px;
      font-weight: normal;
      line-height: 30px;
      margin: 15px 0 20px 0;

    }

    ul { margin-top: 10px; }

    li { margin-bottom: 5px; line-height: 24px; }

    ul.kitemarks {

      margin: 20px 0 10px 0;

      li {
        list-style: none;
        margin-bottom: 15px;
        min-height: 60px;
        padding-left: 75px;
        padding-top: 5px;

      }

      li.kitemark1 { background: url(../img/badges/raw_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark2 { background: url(../img/badges/pilot_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark3 { background: url(../img/badges/standard_level_badge.png) no-repeat top left; background-size: 65px;}
      li.kitemark4 { background: url(../img/badges/exemplar_level_badge.png) no-repeat top left; background-size: 65px;}

    }

  }

}

/*
//
// ***** Terms Page, Contact (Get in touch) Page *****
//
*/
.container.terms, .container.contact {

  .span8 {

    margin-left: 0;

    h2 {

      color: #8e8c8c;
      font-size: 30px;
      margin-top: 15px;
      font-weight: normal;

    }

    h4 {

      color: #000;
      font-size: 18px;

    }

    li { margin-bottom: 5px; line-height: 24px; }

  }

}

/*
//
// ***** Improvements page *****
//
*/
section.improvement{

  header .container {
    background-size: 71px 63px;
    background-repeat: no-repeat;
    background-position: 20px 5px;
  }

  h2 {

    font-size: 27px;
    margin: 0;
    padding-left: 100px;

  }

  h3 {

    line-height: 20px;
    margin: 0 0 15px 0;
    padding-left: 100px;
    max-width: 90%;

  }

  .requirements {
    padding: 25px 0 35px 0;
  }

  li {
    margin-bottom: 20px;

    font-size: 16px;
    color: #4d4d4d;
    width: 66%;
  }

  strong { color: #000; }
  a { color: #000; }

  p { margin-bottom: 20px; }

  // level specific styles
  &.improvement-pilot header .container{
    background-image: url(../img/badges/pilot_level_badge.png);
  }
  &.improvement-standard header .container{
    background-image: url(../img/badges/standard_level_badge.png);
  }
  &.improvement-exemplar header .container{
    background-image: url(../img/badges/exemplar_level_badge.png);
  }

  &.improvement-basic {
    header{
      background: #333;
      h2, h3 { padding-left: 0; }
    }

    background: #474747;

    li, p { color: #fff; -webkit-font-smoothing: antialiased; }

    strong, a {
      color: #fff;
    }

  }

}

// Media queries

//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------

@media (max-width: 767px) {

p.logo {
  display: none;
}

#login, #register  {
  width: 335px;
}

#login input[type="text"], #register input[type="text"], #login input[type="email"], #register input[type="email"], #login input[type="password"], #register input[type="password"] {
  width: 330px;
}

#start-cert-modal{
margin-left: 0;
width: 100%;

  h1 {
    display: block;
    clear: both;
    margin-bottom: 20px;
  }
}

.modal-body {
  padding-left: 30px;
padding-right: 20px;
.log-in {
background: none;
  }
}

}

//
// Responsive: phone
// --------------------------------------------------

@media (max-width: 479px) {

.odi-bleed .navbar .brand {
padding-bottom: 18px;
}

.navbar-inverse .navbar-inner {
  border-bottom: 1px solid #707070;
}

.navbar .nav.pull-right {
  float: left;
  display: block;
  clear: both;
}

.certificate.hero-unit .btn-info {
  margin: -102px auto 8px;
  background-color: #fff;
  float: none;
display: block;
color: @odiBlue;
}

#register {
  left: -2px;
}

#login {
  left: -109px;
}

}

//
// Responsive: tablet
// --------------------------------------------------

@media (min-width: 480px) and (max-width: 767px) {

}

@media (max-width: 979px) {

  #footer .footer-nav {
clear: both;
width: auto;
margin-left: 0;
margin-top: 30px;

  ul.pull-right {
    float: left;

    li {
      margin-right: 20px;
      margin-left: 0;
    }
  }
}

.certificate-summary {
padding: 0;
}

.certificate-data li {
  width: 100%;
}

}

//
// Responsive: Tablet to desktop
// --------------------------------------------------

@media (min-width: 768px) and (max-width: 979px) {

#padd {
  .container {
    .offset8 {
margin-left: 416px;
}
    .span4 {
width: 328px;
}
    }
  }

}

  //
// Responsive: desktop to Large desktop
// --------------------------------------------------

@media  (max-width: 1200px) {

  .home .steps {
    background: none;
  }

  #padd {
    .container {
      h1 {
      font-size: 56px;
      line-height: 69px;
      background-color: #fff;
      padding: 0 5px;
        }

      h2 {
        font-size: 28px;
        line-height: 37px;
        background-color: #fff;
        padding: 0 3px;
      }
    }
  }

  .span6.homepage-about-content {
    clear: both;
    margin-top: 30px;
    width: auto;
  }

  .question-meta p {
    font-size: 15px;
    line-height: 20px;
  }

  #surveyor fieldset.question-row aside {
    padding: 10px;
    width: 230px;
  }

  #footer {
    .footer-nav {
      margin-left: 0;
    }
  }

}

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


added animation fast

added animation fast

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


Added basic LESS styles

Added basic LESS styles

/* Colors Variables */
@accent-color: #72aa36;
@text-color: #615851;

/* Layout Variables */
@content-width: 750px;

/* Fonts Variables */
@heading-font: "Lato", "Helvetica-Neue", "Helvetica", Arial, sans-serif;
@body-font: "Lato", "Helvetica-Neue", "Helvetica", Arial, sans-serif;

::selection {
    background-color: lighten(@accent-color, 40%);
}

::-moz-selection {
	background-color: lighten(@accent-color, 40%);
}

a {
    &:hover {
        text-decoration: none;
    	border-bottom: 2px solid @accent-color;
    }

    &:visited {
        color: darken(@accent-color, 20%);
        border-bottom: 2px solid darken(@accent-color, 20%);
    }

    color: @accent-color;
    text-decoration: none;
    cursor: pointer;
}

.heading () {
    color: @text-color;
    font-family: @heading-font;
    margin-top: 25px;
}

h1 {
    .heading;
    font-size: 2.4em;
    font-weight: bold;
}

h2 {
    .heading;
    font-size: 1.5em;
}

h3 {
    .heading;
    font-size: 1.17em;
    font-weight: bold;
}

p {
    color: @text-color;
    font-family: @body-font, sans-serif;
    font-weight: 300;
    font-size: 1em;
    margin-top: 15px;
}

span {
	color: lighten(@text-color, 40%);
	font-size: 0.8em;
}

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


Fixing semi

Fixing semi

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


Specifying ":link" and ":active" pseudo class rules so we override any existing rules


BAP-5448 action button margins are different

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/trustify/oroplatform.git/'


sticky label styles for settings

sticky label styles for settings

.spec_form {
  button {
    vertical-align: top;
  }
}
.try-out-build {
  line-height: 3em;
  height: 3em;
  margin: 1em 0;
  transition: all .3s ease-in-out;
  opacity: 1;
  &:empty {
    margin: 0;
    opacity: 0;
  }
  label.sticky {
    display: inline-block;
    > input[type="text"] {
      display: inline-block;
      width: 250px;
      margin: 0;
    }
  }
  .inline-input-text {
    display: inline-block;
    margin: 0 .5em;
  }
  .styled-select {
    position: relative;
    width: 250px;
    display: inline-block;
    vertical-align: top;
    select {
      background: transparent;
      -webkit-appearance: none;
      outline: none;
      .outlineInside(@grayLighter);
      border-radius: 5em;
      .box-sizing(border-box);
      line-height: 2em;
      height: 3em;
      width: 100%;
      padding: .5em 1.34em;
      -webkit-font-smoothing: antialiased;
      &:hover ~ i.fa-chevron-down {
        color: @blueLight;
        transition-duration: .1s;
      }
    }
    i {
      &.fa-chevron-down {
        right: 8%;
        pointer-events: none;
        position: absolute;
        top: 25%;
        transition: color .3s ease-in-out;
      }
    }
  }
  form {
    display: inline-block;
  }
  button[type="submit"] {
    font-size: @baseFontSize;
    border: none;
    background: none;
    outline: none;
    color: @blueDark;
    border-bottom: 1px dotted @blueLight;
    padding: 0;
    vertical-align: middle;
    &:hover {
      color: @blueLight;
      border-bottom-color: @blueDark;
    }
  }
  .typeahead {
    .active {
      a {
        background: @grayLightest;
      }
    }
  }
}
#project-settings {
  .flexBox();
  padding: 0 2em;
  a {
    color: @blueDark;
    transition-property: color, text-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    text-decoration: none;
    &:hover {
      color: @blueLight;
      transition-duration: .1s;
    }
    &.btn-primary {
      color: white;
    }
  }
  h1 {
    margin-top: 0;
  }
  h2 {
    font-family: @sansFontFamily;
    font-weight: bold;
    color: @gray;
    font-size: 2em;
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    line-height: 1.25em;
    padding: .25em 0;
  }
  h4 {
    font-family: @sansFontFamily;
    font-weight: bold;
    color: @gray;
    margin: 0;
    font-size: 1em;
    line-height: 2em;
  }
  ul {
    list-style: none;
    margin: 0;
  }
  aside {
    width: 250px;
    min-width: 200px;
    .flex(0, 1.1);
  }
  .tooltip {
    .tooltip-inner {
      padding: 1em;
      background: @grayDark;
    }
    .tooltip-arrow {
      border-top-color: @grayDark;
    }
  }
  .side-list {
    margin: 0;
    list-style: none;
    a {
      padding: .5em 0;
      line-height: 1em;
      margin: 0;
      display: block;
    }
  }
  .side-title {
    line-height: 1em;
    margin: .5em 0;
    padding-top: 1em;
    color: @gray;
    font-weight: bold;
    &:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }
  }
  .project-settings-inner {
    .skin_cleanBoxShadow();
    .flex(1, 1);
    margin: 0 2em;
    min-height: 89vh;
  }
  .follow-status {
    width: 250px;
    min-width: 200px;
    .flex(0, 1.1);
    i {
      font-size: 5em;
      line-height: 1.5em;
      display: block;
      text-align: center;
      color: #555;
    }
    h4 {
      font-size: 1.077em;
      line-height: 1.5em;
      margin: 0 0 .5em 0;
    }
    p {
      margin-bottom: 1em;
      line-height: 1.34em;
    }
    button {
      width: 100%;
      margin: 0 auto;
      display: block;
    }
    .followed {
      button {
        .circleButton(@grayLightest, @redLight);
      }
    }
    .not-followed {
      button {
        .circleButton(@grayLightest, @green);
      }
    }
  }
  // Overview Page
  .overview-options {
    margin: 2em 0;
    .clearfix();
  }
  .overview-item {
    margin-right: 2%;
    float: left;
    width: 300px;
    &:last-child {
      margin-right: 0;
    }
  }
  // Parallelism Page
  .parallelism-items {
    .clearfix();
    @blockSize: 10em;
    @blockColor: @blueDark;
    margin: 0;
    max-width: (@blockSize * 8);
    .selected {
      span {
        .outlineInside(@blockColor);
        color: @whiten;
      }
      ~ label > span {
        background: transparent;
        color: @blockColor;
        .outlineInside(@blockColor);
      }
    }
    label.disabled {
      cursor: default;
      &:hover {
        .insufficient-containers,
        .insufficient-plan,
        .insufficient-trial {
          .translate3d(0, 0, 0);
          transition-duration: .1s;
          opacity: 1;
        }
      }
      > span {
        background: @grayLightest;
        box-shadow: none;
        color: @grayLighter;
      }
    }
    input[type=radio] {
      display: none;
    }
    label {
      width: @blockSize;
      height: @blockSize;
      font-size: inherit;
      margin: 0;
      position: relative;
      float: left;
      overflow: hidden;
      &:hover ~ label > span {
        box-shadow: none;
      }
      > span {
        position: absolute;
        top: 3%;
        left: 3%;
        width: 94%;
        padding: ~'calc(47% - .5em)' 0;
        .box-sizing(border-box);
        background: @blockColor;
        border-radius: 3px;
        line-height: 1em;
        text-align: center;
        transition: box-shadow .2s ease-in-out;
        color: @whiten;
        &:after {
          content: "x";
          margin-right: -.5ex;
        }
      }
    }
    .insufficient-containers,
    .insufficient-plan,
    .insufficient-trial {
      position: absolute;
      top: 0;
      left: 0;
      background: #555;
      padding: .75em;
      color: @grayLightest;
      .box-sizing(border-box);
      top: 3%;
      left: 3%;
      width: 94%;
      height: 97%;
      border-radius: 3px;
      text-align: center;
      .translate3d(0, 110%, 0);
      transition: all .3s ease-in-out;
      opacity: 0;
      a {
        .circleButton(@green);
        font-size: @baseFontSize;
        display: block;
        padding: 3px;
        margin-top: 1.5em;
        text-shadow: none;
      }
      &:empty {
        display: none;
      }
    }
    .insufficient-plan {
      a {
        .circleButton();
        display: block;
        padding: 3px;
        margin-top: 1.5em;
        text-shadow: none;
        font-size: @baseFontSize;
      }
    }
  }
  .parallelism-info {
    width: 48ex;
    order: 1;
    margin: 0 2em 2em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 10em;
    *:empty {
      display: none;
    }
  }
  .mini-faq {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: 2em;
    .mini-faq-item {
      padding-right: 4em;
      .flex(1, 1, 30%);
      min-width: 300px;
      &:last-child {
        padding-right: 0;
      }
    }
  }
  // Environment Variables Page
  .environment-variables-inner{
    margin: 2em 0;
    max-width: @gridRowWidth;
    .env-table {
      .outlineFlat();
      border-radius: 4px;
    }
    form {
      margin: 0;
      + ul li:last-of-type {
          box-shadow: none;
      }
    }
    li {
      display: flex;
      justify-content: space-between;
      line-height: 3em;
      box-shadow: 0 1px @grayBoxBorder;
    }
    span {
      display: block;
      &:not(:last-of-type) {
        .flex(1, 1, 44%);
        padding-left: 1em;
      }
      &:last-of-type {
        flex: 0 0 140px;
      }
    }
    .sticky {
      margin-top: 1em;
    }
    input[type="text"] {
      margin-bottom: 0;
    }
    input[type=submit] {
      .circleButton(@grayLightest, @green);
      font-size: 1em;
      margin: 1em;
      line-height: 3em;
      padding: 0 3em;
    }
    a {
      .tableDrawerBtn();
    }
  }
  // Dependencies Page
  .dependencies-page {
    fieldset {
      a.btn {
        .circleButton();
        margin-top: 2em;
        display: inline-block;
        i {
          margin-left: 1ex;
          font-size: @baseFontSize;
        }
      }
      p {
        max-width: 66%;
      }
    }
    textarea {
      .stickyTextarea();
      &:first-child {
        margin-top: 2em;
      }
    }
  }
  .dependencies-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
  }
  // Dependencies Page
  .tests-page {
    a.btn {
      .circleButton();
      margin-top: 2em;
      display: inline-block;
      i {
        margin-left: 1ex;
        font-size: @baseFontSize;
      }
    }
    p {
      max-width: 66%;
    }
    textarea {
      .stickyTextarea();
      &:first-child {
        margin-top: 2em;
      }
    }
  }
  .tests-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
  }
  // Chatrooms Page
  .chat-rooms {
    .clearfix();
    margin-top: 1em;
  }
  .chat-room-item {
    width: 21em;
    min-height: 34em;
    .outlineFlat();
    border-radius: 4px;
    padding: 0;
    float: left;
    position: relative;
    margin: 0 1em 1em 0;
    &:hover {
      [class^=chat-i] {
        &:before, &:after { transition-duration: .2s;}
        &:before { opacity: 0;}
        &:after { opacity: 1;}
      }
    }
    input[type="checkbox"] {
      margin: 0;
      line-height: 1em;
      height: 1em;
      display: none;
      margin-right: .5em;
      &:not(:checked) {
        ~ span:after {
          opacity: 1;
          transition-duration: .1s;
        }
      }
      ~ span:before {
        content: "\f096";
        font-family: FontAwesome;
        visibility: visible;
        margin-right: 1em;
        position: absolute;
        left: 1em;
      }
      &:checked ~ span:before {
        content: "\f046";
      }
    }
    label {
      > span {
        margin-left: 1.5em;
        &:after {
          content: "?";
          opacity: 0;
          transition: .3s opacity ease-in-out;
        }
      }
    }
  }
  .chat-room-head {
    @logoHeight: 20px;
    padding: 1em;
    box-shadow: 0 1px @grayBoxBorder;
    [class^=chat-i] {
      line-height: @logoHeight;
      &:before, &:after {
        content: "";
        width: @logoHeight;
        height: @logoHeight;
        position: absolute;
        right: 0;
        top: 0;
        margin: 1em;
        background-image: url('@{imgPath}/chat-sprite1.png');
        transition: opacity .4s ease-in-out;
      }
      &:before {
        opacity: 1;
      }
      &:after {
        opacity: 0;
      }
    }
    .chat-i-hip {
      &:before { background-position: 0 @logoHeight;}
      &:after  { background-position: 0 0          ;}
    }
    .chat-i-camp {
      &:before { background-position: -@logoHeight -@logoHeight;}
      &:after  { background-position: -@logoHeight  0          ;}
    }
    .chat-i-flow {
      &:before { background-position: (-@logoHeight * 2) -@logoHeight;}
      &:after  { background-position: (-@logoHeight * 2)  0          ;}
    }
    .chat-i-irc {
      &:before { background-position: (-@logoHeight * 3) -@logoHeight;}
      &:after  { background-position: (-@logoHeight * 3)  0          ;}
    }
  }
  .chat-room-body {
    .clearfix();
    section:first-of-type {
      padding: 1em;
    }
    section:last-of-type {
      position: absolute;
      bottom: 3em;
      width: 100%;
      padding: 0 1em;
      .box-sizing(border-box);
    }
  }
  .chat-room-foot {
    box-shadow: 0 -1px #ddd;
    margin-top: auto;
    position: absolute;
    bottom: 0;
    width: 100%;
    &:empty {
      padding-top: 3em;
    }
    label {
      padding: 1em;
      span {
        margin-left: 1.5em;
      }
    }
    label {
      margin: 0;
      line-height: 1em;
      height: 1em;
    }
    i {
      font-size: 10px;
      float: right;
      line-height: 1.300em;
    }
    .tooltip {
      position: relative;
    }
  }
  .chat-room-save {
    display: block;
    margin: 2em 0;
    input {
      &[type="submit"] {
        .circleButton();
        font-size: 1em;
      }
    }
  }
  // SSH Keys Page
  .sshkeys-page {
    table {
      .skin_table();
      margin: 2em 0;
      th {
        text-align: left;
        &:last-child {
          width: 1%;
        }
      }
      td {
        vertical-align: middle;
      }
    }
    form {
      max-width: 250px;
    }
    input {
      &[type="submit"] {
        .circleButton();
        display: inline-block;
      }
    }
  }
  .sshkeys-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
    a {
      .tableDrawerBtn();
      line-height: 1em;
      > i {
        padding: 0;
        padding-left: 7.5em;
      }
    }
  }
  // Github Page
  .github-page {
    form {
      input[type="submit"] {
        .circleButton();
      }
    }
  }
  .github-page-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
  }
  // Circle API Page
  .circle-api-page {
    table {
      .skin_table();
      margin: 2em 0;
      overflow: visible;
      th {
        text-align: left;
        &:last-child {
          width: 1%;
        }
      }
      td {
        vertical-align: middle;
      }
      .slideBtn {
        .tableDrawerBtn();
        line-height: 1em;
        > i {
          padding: 0;
          padding-left: 7.5em;
        }
      }
    }
  }
  .circle-api-page-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
    .popover {
      width: 500px;
      top: 66px;
      left: 340px;
    }
    label.sticky {
      width: 250px;
      display: inline-block;
      margin-left: 1em;
    }
    input {
      &[type="submit"] {
        .circleButton();
        font-size: inherit;
        vertical-align: top;
        margin-left: 1em;
      }
    }
    i {
      cursor: pointer;
    }
    .styled-select {
      position: relative;
      width: 250px;
      display: inline-block;
      select {
        background: transparent;
        -webkit-appearance: none;
        outline: none;
        .outlineInside(@grayLighter);
        border-radius: 5em;
        .box-sizing(border-box);
        line-height: 2em;
        height: 3em;
        width: 100%;
        padding: .5em 1.34em;
        margin-bottom: 1em;
        -webkit-font-smoothing: antialiased;
        &:hover ~ i.fa-chevron-down {
          color: @blueLight;
          transition-duration: .1s;
        }
      }
      i {
        &.fa-chevron-down {
          right: 10%;
          pointer-events: none;
          position: absolute;
          top: 20%;
          transition: color .3s ease-in-out;
        }
      }
    }
  }
  // Heroku Page
  .heroku-step {
    margin-bottom: 3em;
    h4 {
      margin: 1em 0;
    }
    input[type="submit"] {
      outline: none;
    }
    .set-user {
      .circleButton(@grayLightest, @green);
    }
    .remove-user {
      .circleButton(@grayLightest, @redLight);
    }
  }
  .heroku-item {
    > h2 {
      display: none;
    }
  }
}

.spec_form {
  button {
    vertical-align: top;
  }
}
.try-out-build {
  line-height: 3em;
  height: 3em;
  margin: 1em 0;
  transition: all .3s ease-in-out;
  opacity: 1;
  &:empty {
    margin: 0;
    opacity: 0;
  }
  input[type="text"] {
    .stickyInput();
    display: inline-block;
    width: 250px;
  }
  .inline-input-text {
    display: inline-block;
    margin: 0 .5em;
  }
  .styled-select {
    position: relative;
    width: 250px;
    display: inline-block;
    vertical-align: top;
    select {
      background: transparent;
      -webkit-appearance: none;
      outline: none;
      .outlineInside(@grayLighter);
      border-radius: 5em;
      .box-sizing(border-box);
      line-height: 2em;
      height: 3em;
      width: 100%;
      padding: .5em 1.34em;
      -webkit-font-smoothing: antialiased;
      &:hover ~ i.fa-chevron-down {
        color: @blueLight;
        transition-duration: .1s;
      }
    }
    i {
      &.fa-chevron-down {
        right: 8%;
        pointer-events: none;
        position: absolute;
        top: 25%;
        transition: color .3s ease-in-out;
      }
    }
  }
  form {
    display: inline-block;
  }
  button[type="submit"] {
    font-size: @baseFontSize;
    border: none;
    background: none;
    outline: none;
    color: @blueDark;
    border-bottom: 1px dotted @blueLight;
    padding: 0;
    vertical-align: middle;
    &:hover {
      color: @blueLight;
      border-bottom-color: @blueDark;
    }
  }
  .typeahead {
    .active {
      a {
        background: @grayLightest;
      }
    }
  }
}
#project-settings {
  .flexBox();
  padding: 0 2em;
  a {
    color: @blueDark;
    transition-property: color, text-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
    text-decoration: none;
    &:hover {
      color: @blueLight;
      transition-duration: .1s;
    }
    &.btn-primary {
      color: white;
    }
  }
  h1 {
    margin-top: 0;
  }
  h2 {
    font-family: @sansFontFamily;
    font-weight: bold;
    color: @gray;
    font-size: 2em;
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    line-height: 1.25em;
    padding: .25em 0;
  }
  h4 {
    font-family: @sansFontFamily;
    font-weight: bold;
    color: @gray;
    margin: 0;
    font-size: 1em;
    line-height: 2em;
  }
  ul {
    list-style: none;
    margin: 0;
  }
  aside {
    width: 250px;
    min-width: 200px;
    .flex(0, 1.1);
  }
  .tooltip {
    .tooltip-inner {
      padding: 1em;
      background: @grayDark;
    }
    .tooltip-arrow {
      border-top-color: @grayDark;
    }
  }
  .side-list {
    margin: 0;
    list-style: none;
    a {
      padding: .5em 0;
      line-height: 1em;
      margin: 0;
      display: block;
    }
  }
  .side-title {
    line-height: 1em;
    margin: .5em 0;
    padding-top: 1em;
    color: @gray;
    font-weight: bold;
    &:first-of-type {
      margin-top: 0;
      padding-top: 0;
    }
  }
  .project-settings-inner {
    .skin_cleanBoxShadow();
    .flex(1, 1);
    margin: 0 2em;
    min-height: 89vh;
  }
  .follow-status {
    width: 250px;
    min-width: 200px;
    .flex(0, 1.1);
    i {
      font-size: 5em;
      line-height: 1.5em;
      display: block;
      text-align: center;
      color: #555;
    }
    h4 {
      font-size: 1.077em;
      line-height: 1.5em;
      margin: 0 0 .5em 0;
    }
    p {
      margin-bottom: 1em;
      line-height: 1.34em;
    }
    button {
      width: 100%;
      margin: 0 auto;
      display: block;
    }
    .followed {
      button {
        .circleButton(@grayLightest, @redLight);
      }
    }
    .not-followed {
      button {
        .circleButton(@grayLightest, @green);
      }
    }
  }
  // Overview Page
  .overview-options {
    margin: 2em 0;
    .clearfix();
  }
  .overview-item {
    margin-right: 2%;
    float: left;
    width: 300px;
    &:last-child {
      margin-right: 0;
    }
  }
  // Parallelism Page
  .parallelism-items {
    .clearfix();
    @blockSize: 10em;
    @blockColor: @blueDark;
    margin: 0;
    max-width: (@blockSize * 8);
    .selected {
      span {
        .outlineInside(@blockColor);
        color: @whiten;
      }
      ~ label > span {
        background: transparent;
        color: @blockColor;
        .outlineInside(@blockColor);
      }
    }
    label.disabled {
      cursor: default;
      &:hover {
        .insufficient-containers,
        .insufficient-plan,
        .insufficient-trial {
          .translate3d(0, 0, 0);
          transition-duration: .1s;
          opacity: 1;
        }
      }
      > span {
        background: @grayLightest;
        box-shadow: none;
        color: @grayLighter;
      }
    }
    input[type=radio] {
      display: none;
    }
    label {
      width: @blockSize;
      height: @blockSize;
      font-size: inherit;
      margin: 0;
      position: relative;
      float: left;
      overflow: hidden;
      &:hover ~ label > span {
        box-shadow: none;
      }
      > span {
        position: absolute;
        top: 3%;
        left: 3%;
        width: 94%;
        padding: ~'calc(47% - .5em)' 0;
        .box-sizing(border-box);
        background: @blockColor;
        border-radius: 3px;
        line-height: 1em;
        text-align: center;
        transition: box-shadow .2s ease-in-out;
        color: @whiten;
        &:after {
          content: "x";
          margin-right: -.5ex;
        }
      }
    }
    .insufficient-containers,
    .insufficient-plan,
    .insufficient-trial {
      position: absolute;
      top: 0;
      left: 0;
      background: #555;
      padding: .75em;
      color: @grayLightest;
      .box-sizing(border-box);
      top: 3%;
      left: 3%;
      width: 94%;
      height: 97%;
      border-radius: 3px;
      text-align: center;
      .translate3d(0, 110%, 0);
      transition: all .3s ease-in-out;
      opacity: 0;
      a {
        .circleButton(@green);
        font-size: @baseFontSize;
        display: block;
        padding: 3px;
        margin-top: 1.5em;
        text-shadow: none;
      }
      &:empty {
        display: none;
      }
    }
    .insufficient-plan {
      a {
        .circleButton();
        display: block;
        padding: 3px;
        margin-top: 1.5em;
        text-shadow: none;
        font-size: @baseFontSize;
      }
    }
  }
  .parallelism-info {
    width: 48ex;
    order: 1;
    margin: 0 2em 2em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 10em;
    *:empty {
      display: none;
    }
  }
  .mini-faq {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: 2em;
    .mini-faq-item {
      padding-right: 4em;
      .flex(1, 1, 30%);
      min-width: 300px;
      &:last-child {
        padding-right: 0;
      }
    }
  }
  // Environment Variables Page
  .environment-variables-inner{
    margin: 2em 0;
    max-width: @gridRowWidth;
    .env-table {
      .outlineFlat();
      border-radius: 4px;
    }
    form {
      margin: 0;
      + ul li:last-of-type {
          box-shadow: none;
      }
    }
    li {
      display: flex;
      justify-content: space-between;
      line-height: 3em;
      box-shadow: 0 1px @grayBoxBorder;
    }
    span {
      display: block;
      &:not(:last-of-type) {
        .flex(1, 1, 44%);
        padding-left: 1em;
      }
      &:last-of-type {
        flex: 0 0 140px;
      }
    }
    .sticky {
      margin-top: 1em;
    }
    input[type="text"] {
      margin-bottom: 0;
    }
    input[type=submit] {
      .circleButton(@grayLightest, @green);
      font-size: 1em;
      margin: 1em;
      line-height: 3em;
      padding: 0 3em;
    }
    a {
      .tableDrawerBtn();
    }
  }
  // Dependencies Page
  .dependencies-page {
    fieldset {
      a.btn {
        .circleButton();
        margin-top: 2em;
        display: inline-block;
        i {
          margin-left: 1ex;
          font-size: @baseFontSize;
        }
      }
      p {
        max-width: 66%;
      }
    }
    textarea {
      .stickyTextarea();
      &:first-child {
        margin-top: 2em;
      }
    }
  }
  .dependencies-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
  }
  // Dependencies Page
  .tests-page {
    a.btn {
      .circleButton();
      margin-top: 2em;
      display: inline-block;
      i {
        margin-left: 1ex;
        font-size: @baseFontSize;
      }
    }
    p {
      max-width: 66%;
    }
    textarea {
      .stickyTextarea();
      &:first-child {
        margin-top: 2em;
      }
    }
  }
  .tests-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
  }
  // Chatrooms Page
  .chat-rooms {
    .clearfix();
    margin-top: 1em;
  }
  .chat-room-item {
    width: 21em;
    min-height: 34em;
    .outlineFlat();
    border-radius: 4px;
    padding: 0;
    float: left;
    position: relative;
    margin: 0 1em 1em 0;
    &:hover {
      [class^=chat-i] {
        &:before, &:after { transition-duration: .2s;}
        &:before { opacity: 0;}
        &:after { opacity: 1;}
      }
    }
    input[type="checkbox"] {
      margin: 0;
      line-height: 1em;
      height: 1em;
      display: none;
      margin-right: .5em;
      &:not(:checked) {
        ~ span:after {
          opacity: 1;
          transition-duration: .1s;
        }
      }
      ~ span:before {
        content: "\f096";
        font-family: FontAwesome;
        visibility: visible;
        margin-right: 1em;
        position: absolute;
        left: 1em;
      }
      &:checked ~ span:before {
        content: "\f046";
      }
    }
    label {
      > span {
        margin-left: 1.5em;
        &:after {
          content: "?";
          opacity: 0;
          transition: .3s opacity ease-in-out;
        }
      }
    }
  }
  .chat-room-head {
    @logoHeight: 20px;
    padding: 1em;
    box-shadow: 0 1px @grayBoxBorder;
    [class^=chat-i] {
      line-height: @logoHeight;
      &:before, &:after {
        content: "";
        width: @logoHeight;
        height: @logoHeight;
        position: absolute;
        right: 0;
        top: 0;
        margin: 1em;
        background-image: url('@{imgPath}/chat-sprite1.png');
        transition: opacity .4s ease-in-out;
      }
      &:before {
        opacity: 1;
      }
      &:after {
        opacity: 0;
      }
    }
    .chat-i-hip {
      &:before { background-position: 0 @logoHeight;}
      &:after  { background-position: 0 0          ;}
    }
    .chat-i-camp {
      &:before { background-position: -@logoHeight -@logoHeight;}
      &:after  { background-position: -@logoHeight  0          ;}
    }
    .chat-i-flow {
      &:before { background-position: (-@logoHeight * 2) -@logoHeight;}
      &:after  { background-position: (-@logoHeight * 2)  0          ;}
    }
    .chat-i-irc {
      &:before { background-position: (-@logoHeight * 3) -@logoHeight;}
      &:after  { background-position: (-@logoHeight * 3)  0          ;}
    }
  }
  .chat-room-body {
    .clearfix();
    section:first-of-type {
      padding: 1em;
    }
    section:last-of-type {
      position: absolute;
      bottom: 3em;
      width: 100%;
      padding: 0 1em;
      .box-sizing(border-box);
    }
  }
  .chat-room-foot {
    box-shadow: 0 -1px #ddd;
    margin-top: auto;
    position: absolute;
    bottom: 0;
    width: 100%;
    &:empty {
      padding-top: 3em;
    }
    label {
      padding: 1em;
      span {
        margin-left: 1.5em;
      }
    }
    label {
      margin: 0;
      line-height: 1em;
      height: 1em;
    }
    i {
      font-size: 10px;
      float: right;
      line-height: 1.300em;
    }
    .tooltip {
      position: relative;
    }
  }
  .chat-room-save {
    display: block;
    margin: 2em 0;
    input {
      &[type="submit"] {
        .circleButton();
        font-size: 1em;
      }
    }
  }
  // SSH Keys Page
  .sshkeys-page {
    table {
      .skin_table();
      margin: 2em 0;
      th {
        text-align: left;
        &:last-child {
          width: 1%;
        }
      }
      td {
        vertical-align: middle;
      }
    }
    form {
      max-width: 250px;
    }
    input {
      &[type="submit"] {
        .circleButton();
        display: inline-block;
      }
    }
  }
  .sshkeys-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
    a {
      .tableDrawerBtn();
      line-height: 1em;
      > i {
        padding: 0;
        padding-left: 7.5em;
      }
    }
  }
  // Github Page
  .github-page {
    form {
      input[type="submit"] {
        .circleButton();
      }
    }
  }
  .github-page-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
  }
  // Circle API Page
  .circle-api-page {
    table {
      .skin_table();
      margin: 2em 0;
      overflow: visible;
      th {
        text-align: left;
        &:last-child {
          width: 1%;
        }
      }
      td {
        vertical-align: middle;
      }
      .slideBtn {
        .tableDrawerBtn();
        line-height: 1em;
        > i {
          padding: 0;
          padding-left: 7.5em;
        }
      }
    }
  }
  .circle-api-page-inner {
    margin: 2em 0;
    max-width: @gridRowWidth;
    .popover {
      width: 500px;
      top: 66px;
      left: 340px;
    }
    label.sticky {
      width: 250px;
      display: inline-block;
      margin-left: 1em;
    }
    input {
      &[type="submit"] {
        .circleButton();
        font-size: inherit;
        vertical-align: top;
        margin-left: 1em;
      }
    }
    i {
      cursor: pointer;
    }
    .styled-select {
      position: relative;
      width: 250px;
      display: inline-block;
      select {
        background: transparent;
        -webkit-appearance: none;
        outline: none;
        .outlineInside(@grayLighter);
        border-radius: 5em;
        .box-sizing(border-box);
        line-height: 2em;
        height: 3em;
        width: 100%;
        padding: .5em 1.34em;
        margin-bottom: 1em;
        -webkit-font-smoothing: antialiased;
        &:hover ~ i.fa-chevron-down {
          color: @blueLight;
          transition-duration: .1s;
        }
      }
      i {
        &.fa-chevron-down {
          right: 10%;
          pointer-events: none;
          position: absolute;
          top: 20%;
          transition: color .3s ease-in-out;
        }
      }
    }
  }
  // Heroku Page
  .heroku-step {
    margin-bottom: 3em;
    h4 {
      margin: 1em 0;
    }
    input[type="submit"] {
      outline: none;
    }
    .set-user {
      .circleButton(@grayLightest, @green);
    }
    .remove-user {
      .circleButton(@grayLightest, @redLight);
    }
  }
  .heroku-item {
    > h2 {
      display: none;
    }
  }
}


updated prefix-mixin

updated prefix-mixin

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/pixelass/more-or-less.git/'


line-heightにcalcを使用できないレンダリングエンジンのためのフォールバックを追加

@import "../../common";

.ui-input-text,
.ui-input-url,
.ui-input-email,
.ui-input-password,
.ui-textarea,
.ui-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	display: block;
	box-sizing: border-box;
	cursor: auto;
	margin: 0;
	padding: 10px 12px;
	width: 100%;
	line-height: 1em;
	font-size: 1em;
	color: #000;
	outline: none;
	border: solid 2px #ddd;
	border-radius: 4px;
	box-shadow: none;
	transition: color 0.5s ease, border 0.5s ease, box-shadow 0.5s ease;

	&:hover {
		border: solid 2px @themeColor;
		transition: border 0.2s ease, box-shadow 0.2s ease;
	}

	&:focus {
		color: darken(@themeColor, 20%);
		border: solid 2px @themeColor;
		transition: color 0, border 0.5s ease, box-shadow 0.05s ease;
	}

	&::-webkit-input-placeholder {
		color: rgb(169, 169, 169);
	}

	&:-ms-input-placeholder {
		color: rgb(169, 169, 169);
	}

	&:-moz-placeholder {
		color: rgb(169, 169, 169);
	}
}

.ui-textarea {
	height: 6em;
	max-width: 100%;
}

.ui-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px;
	width: 100%;
	cursor: pointer;
	font-size: 1.3em;
	font-weight: normal;
	text-decoration: none;
	color: contrast(@themeColor, #000, #fff, 70%);
	background: @themeColor !important;
	outline: none;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	transition: background 0.1s ease;

	&:hover {
		background: lighten(@themeColor, 10%) !important;
	}

	&:active {
		background: darken(@themeColor, 10%) !important;
		transition: background 0s ease;
	}
}

.ui-input-file {
	display: block;
	box-sizing: border-box;
	margin: 8px 0;
	padding: 8px;
	width: 100%;
	border: dashed 2px #ddd;
}

/* UI
 * ---------------------------------------------------------------- */
@header-background: #424A4C;

#misskey-header {
	position: fixed;
	top: 0;
	z-index: 1024;
	width: 100%;
	//color: #fff;
	//background: #006f87;
	color: contrast(@header-background, #000, #fff, 70%);
	background: @header-background;
	background-color: @header-background;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	//box-shadow: 0 -3px 2px 4px rgba(0, 0, 0, 0.3);
	&:after {
		content: "";
		display: block;
		clear: both;
	}

	h1 {
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 6px 0;
		width: 100%;
		max-width: ~"calc(100% - 112px)";
		text-align: center;
		font-size: 1.1em;
		font-weight: normal;
		line-height: 36px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		i {
			margin-right: 8px;
		}
	}

	#open-misskey-nav-button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 6px 14px;
		cursor: pointer;
		color: contrast(@themeColor, #000, #fff, 70%);
		font-size: 1.4em;
		line-height: 36px;
		font-weight: normal;
		text-decoration: none;
		background: transparent;
		outline: none;
		border: none;
		border-right: solid 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		box-shadow: none;

		> i {
			transition: all 0.2s ease;
		}
	}

	.post {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		box-sizing: border-box;
		margin: 0;
		padding: 6px 12px;
		color: contrast(@themeColor, #000, #fff, 70%);
		font-size: 1.4em;
		line-height: 36px;
		background: transparent;
		outline: none;
		border: none;
		border-left: solid 1px rgba(0, 0, 0, 0.1);

		i {
			vertical-align: middle;
		}
	}
}

#misskey-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 240px;
	color: #fff;
	background: #313538;
	visibility: hidden;

	.slidemenu-body {
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.slidemenu-content {
		box-sizing: border-box;
		height: 100%;
	}

	.donate {
		display: block;
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #000;
		background: #cef1df;
	}

	.me {
		display: block;
		position: relative;
		margin: 0;
		padding: 16px;

		.avatar {
			display: inline;
			max-width: 64px;
			border-radius: 32px;
			vertical-align: middle;
		}

		.name {
			display: block;
			margin: 0 16px;
			position: absolute;
			top: 0;
			left: 80px;
			padding: 0;
			width: ~"calc(100% - 112px)";
			color: #fff;
			line-height: 96px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	ul {
		display: block;
		margin: 16px 0;
		padding: 0;
		list-style: none;

		&:first-child {
			margin-top: 0;
		}

		li {
			display: block;
			font-size: 1em;
			line-height: 1em;
			border-top: solid 1px rgba(0, 0, 0, 0.2);
			background: #353A3E;
			background-clip: content-box;

			&:last-child {
				border-bottom: solid 1px rgba(0, 0, 0, 0.2);
			}

			a {
				display: block;
				position: relative;
				padding: 0 20px;
				line-height: 3rem;
				line-height: ~"calc(1rem + 30px)";
				color: #eee;
				text-decoration: none;

				> .icon {
					margin-right: 0.5em;
				}

				> .angle {
					position: absolute;
					top: 0;
					right: 0;
					padding: 0 20px;
					font-size: 1.2em;
					line-height: ~"calc(1rem + 30px)";
					color: #ccc;
				}

				> .unread-count {
					position: absolute;
					height: ~"calc(0.9em + 10px)";
					line-height: ~"calc(0.9em + 10px)";
					top: 0;
					bottom: 0;
					right: 38px;
					box-sizing: border-box;
					margin: auto 0;
					padding: 0px 8px;
					min-width: 2em;
					font-size: 0.9em;
					text-align: center;
					color: #fff;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 1em;
				}
			}
		}
	}

	.manager {
		margin: 1em;
		text-align: center;
		font-size: 0.5em;
		opacity: 0.3;
	}
}

#misskey-main {
	box-sizing: border-box;
}

body[data-nav-open='true'] {
	#open-misskey-nav-button {
		> i {
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}
	}
}

@import "../../common";

.ui-input-text,
.ui-input-url,
.ui-input-email,
.ui-input-password,
.ui-textarea,
.ui-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	display: block;
	box-sizing: border-box;
	cursor: auto;
	margin: 0;
	padding: 10px 12px;
	width: 100%;
	line-height: 1em;
	font-size: 1em;
	color: #000;
	outline: none;
	border: solid 2px #ddd;
	border-radius: 4px;
	box-shadow: none;
	transition: color 0.5s ease, border 0.5s ease, box-shadow 0.5s ease;

	&:hover {
		border: solid 2px @themeColor;
		transition: border 0.2s ease, box-shadow 0.2s ease;
	}

	&:focus {
		color: darken(@themeColor, 20%);
		border: solid 2px @themeColor;
		transition: color 0, border 0.5s ease, box-shadow 0.05s ease;
	}

	&::-webkit-input-placeholder {
		color: rgb(169, 169, 169);
	}

	&:-ms-input-placeholder {
		color: rgb(169, 169, 169);
	}

	&:-moz-placeholder {
		color: rgb(169, 169, 169);
	}
}

.ui-textarea {
	height: 6em;
	max-width: 100%;
}

.ui-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px;
	width: 100%;
	cursor: pointer;
	font-size: 1.3em;
	font-weight: normal;
	text-decoration: none;
	color: contrast(@themeColor, #000, #fff, 70%);
	background: @themeColor !important;
	outline: none;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	transition: background 0.1s ease;

	&:hover {
		background: lighten(@themeColor, 10%) !important;
	}

	&:active {
		background: darken(@themeColor, 10%) !important;
		transition: background 0s ease;
	}
}

.ui-input-file {
	display: block;
	box-sizing: border-box;
	margin: 8px 0;
	padding: 8px;
	width: 100%;
	border: dashed 2px #ddd;
}

/* UI
 * ---------------------------------------------------------------- */
@header-background: #424A4C;

#misskey-header {
	position: fixed;
	top: 0;
	z-index: 1024;
	width: 100%;
	//color: #fff;
	//background: #006f87;
	color: contrast(@header-background, #000, #fff, 70%);
	background: @header-background;
	background-color: @header-background;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	//box-shadow: 0 -3px 2px 4px rgba(0, 0, 0, 0.3);

	&:after {
		content: "";
		display: block;
		clear: both;
	}

	h1 {
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 6px 0;
		width: 100%;
		max-width: ~"calc(100% - 112px)";
		text-align: center;
		font-size: 1.1em;
		font-weight: normal;
		line-height: 36px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		i {
			margin-right: 8px;
		}
	}

	#open-misskey-nav-button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 6px 14px;
		cursor: pointer;
		color: contrast(@themeColor, #000, #fff, 70%);
		font-size: 1.4em;
		line-height: 36px;
		font-weight: normal;
		text-decoration: none;
		background: transparent;
		outline: none;
		border: none;
		border-right: solid 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		box-shadow: none;

		> i {
			transition: all 0.2s ease;
		}
	}

	.post {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		box-sizing: border-box;
		margin: 0;
		padding: 6px 12px;
		color: contrast(@themeColor, #000, #fff, 70%);
		font-size: 1.4em;
		line-height: 36px;
		background: transparent;
		outline: none;
		border: none;
		border-left: solid 1px rgba(0, 0, 0, 0.1);

		i {
			vertical-align: middle;
		}
	}
}

#misskey-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 240px;
	color: #fff;
	background: #313538;
	visibility: hidden;

	.slidemenu-body {
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.slidemenu-content {
		box-sizing: border-box;
		height: 100%;
	}

	.donate {
		display: block;
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #000;
		background: #cef1df;
	}

	.me {
		display: block;
		position: relative;
		margin: 0;
		padding: 16px;

		.avatar {
			display: inline;
			max-width: 64px;
			border-radius: 32px;
			vertical-align: middle;
		}

		.name {
			display: block;
			margin: 0 16px;
			position: absolute;
			top: 0;
			left: 80px;
			padding: 0;
			width: ~"calc(100% - 112px)";
			color: #fff;
			line-height: 96px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	ul {
		display: block;
		margin: 16px 0;
		padding: 0;
		list-style: none;

		&:first-child {
			margin-top: 0;
		}

		li {
			display: block;
			font-size: 1em;
			line-height: 1em;
			border-top: solid 1px rgba(0, 0, 0, 0.2);
			background: #353A3E;
			background-clip: content-box;

			&:last-child {
				border-bottom: solid 1px rgba(0, 0, 0, 0.2);
			}

			a {
				display: block;
				position: relative;
				padding: 0 20px;
				line-height: ~"calc(1rem + 30px)";
				color: #eee;
				text-decoration: none;

				> .icon {
					margin-right: 0.5em;
				}

				> .angle {
					position: absolute;
					top: 0;
					right: 0;
					padding: 0 20px;
					font-size: 1.2em;
					line-height: ~"calc(1rem + 30px)";
					color: #ccc;
				}

				> .unread-count {
					position: absolute;
					height: ~"calc(0.9em + 10px)";
					line-height: ~"calc(0.9em + 10px)";
					top: 0;
					bottom: 0;
					right: 38px;
					box-sizing: border-box;
					margin: auto 0;
					padding: 0px 8px;
					min-width: 2em;
					font-size: 0.9em;
					text-align: center;
					color: #fff;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 1em;
				}
			}
		}
	}

	.manager {
		margin: 1em;
		text-align: center;
		font-size: 0.5em;
		opacity: 0.3;
	}
}

#misskey-main {
	box-sizing: border-box;
}

body[data-nav-open='true'] {
	#open-misskey-nav-button {
		> i {
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}
	}
}


Increase buttons contrast

Increase buttons contrast

.tool-bar {
  button.tool-bar-btn {
    background-color: @base-background-color;
    color: #ccc!important;

    &:before {
      display: inline;
    }

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

  button.tool-bar-btn.disabled {
    color: #444!important;
  }
}

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


Fix #1855 (gridMenu): position on IE, change back to absolute

.ui-grid-menu-button {
  z-index: 2;
  position: absolute;
  right: 0;
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  cursor: pointer;
  min-height: 27px;
  font-weight: normal;
}

.ui-grid-menu-button .ui-grid-icon-container {
  margin-top: 3px;
}

.ui-grid-menu-button .ui-grid-menu {
  right: 0;
}

.ui-grid-menu {
  z-index: 2; // So it shows up over grid canvas
  position: fixed;
  overflow: hidden;
  padding: 0 10px 20px 10px;
  cursor: pointer;
  box-sizing: content-box;
}

.ui-grid-menu .ui-grid-menu-inner {
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  position: relative;
  white-space: nowrap;

  .rounded(@gridBorderRadius);
  .box-shadow(e("0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2)"));
}

.ui-grid-menu .ui-grid-menu-inner ul {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    padding: 8px;
    cursor: pointer;

    // Show a shadow when hovering over a menu item
    &:hover {
      // background-color: negation(@headerBackgroundColor, #fff);
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
    }

    &.ui-grid-menu-item-active {
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
      background-color: @selectedColor;
    }
  }

  // Show a bottom border on all but the last menu item
  li:not(:last-child) {
    border-bottom: @gridBorderWidth solid @borderColor;
  }
}

.ui-grid-menu-button {
  z-index: 2;
  position: fixed;
  right: 0;
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  cursor: pointer;
  min-height: 27px;
  font-weight: normal;
}

.ui-grid-menu-button .ui-grid-icon-container {
  margin-top: 3px;
}

.ui-grid-menu-button .ui-grid-menu {
  right: 0;
}

.ui-grid-menu {
  z-index: 2; // So it shows up over grid canvas
  position: fixed;
  overflow: hidden;
  padding: 0 10px 20px 10px;
  cursor: pointer;
  box-sizing: content-box;
}

.ui-grid-menu .ui-grid-menu-inner {
  background: @headerBackgroundColor;
  border: @gridBorderWidth solid @borderColor;
  position: relative;
  white-space: nowrap;

  .rounded(@gridBorderRadius);
  .box-shadow(e("0 10px 20px rgba(0, 0, 0, 0.2), inset 0 12px 12px -14px rgba(0, 0, 0, 0.2)"));
}

.ui-grid-menu .ui-grid-menu-inner ul {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    padding: 8px;
    cursor: pointer;

    // Show a shadow when hovering over a menu item
    &:hover {
      // background-color: negation(@headerBackgroundColor, #fff);
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
    }

    &.ui-grid-menu-item-active {
      .inner-shadow(@vertical: 0, @blur: 14px, @alpha: 0.2);
      background-color: @selectedColor;
    }
  }

  // Show a bottom border on all but the last menu item
  li:not(:last-child) {
    border-bottom: @gridBorderWidth solid @borderColor;
  }
}


Added strong styling for fx

Added strong styling for fx

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