Avoid cutting off menu item

Avoid cutting off menu item

/**
 *    Copyright 2015 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.logo-menu {
  @_menu-colour: @grey-3;
  @_menu-colour-hover: @grey-2;
  @_menu-text-colour: @grey-f;
  @_stripe-width: (@spacing / 2);
  width: 100%;
  height: 100%;
  position: absolute;

  &__logo {
    width: 100%;
    height: 100%;
    background-image: url('/images/layout/osu-logo-white.svg');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
  }

  &__logo-container {
    width: 100%;
    height: 100%;
    display: block;

    &.js-menu--active,
    &:focus,
    &:hover,
    &:active {
      .logo-menu__logo-hover-bg {
        opacity: 1;
      }
    }
  }

  &__logo-hover-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  &__menu {
    list-style: none;
    flex-direction: column;
    position: absolute;
    padding: 0;
    display: flex;
    background-color: @_menu-colour;

    &--main {
      top: 100%;
      left: 0;
    }

    &--sub {
      top: 0;
      left: 100%;
    }
  }

  &__menu-item {
    &--separator {
      height: @spacing;
    }
  }

  &__menu-link {
    color: @_menu-text-colour;
    display: flex;

    &.js-menu--active,
    &:focus,
    &:hover,
    &:active {
      background-image: linear-gradient(to right, transparent @_stripe-width, @_menu-colour-hover @_stripe-width);
      color: @_menu-text-colour;
      text-decoration: none;

      .logo-menu__menu-stripe {
        opacity: 1;
      }
    }
  }

  &__menu-link-icon {
    padding-left: (@spacing * 2);
  }

  &__menu-stripe {
    width: @_stripe-width;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    &--hover {
      opacity: 0;
    }
  }

  &__menu-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: (@spacing / 2) @spacing (@spacing / 2) (@spacing * 2);
    font-size: 15px;
    white-space: nowrap;

    &--sub {
      padding-right: (@spacing * 2);
    }
  }

  &__user {
    display: flex;
    background-size: cover;

    &--full {
      &:focus,
      &:hover,
      &:active {
        background-color: @_menu-colour-hover;
        text-decoration: none;
        color: @_menu-text-colour;
      }
    }
  }

  &__user-slice {
    padding: @spacing;
    color: @_menu-text-colour;

    &:focus,
    &:hover,
    &:active {
      background-color: @_menu-colour-hover;
      text-decoration: none;
      color: @_menu-text-colour;
    }

    &--avatar {
      @_avatar-size: 40px;
      width: (@spacing * 2 + @_avatar-size);
      height: (@spacing * 2 + @_avatar-size);
      padding: @spacing;
    }

    &--bg {
      background-color: fade(@grey-0, 50%);
    }

    &--session {
      flex: 1 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;

    }
  }
}

/**
 *    Copyright 2015 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
.logo-menu {
  @_menu-colour: @grey-3;
  @_menu-colour-hover: @grey-2;
  @_menu-text-colour: @grey-f;
  @_stripe-width: (@spacing / 2);
  width: 100%;
  height: 100%;
  position: absolute;

  &__logo {
    width: 100%;
    height: 100%;
    background-image: url('/images/layout/osu-logo-white.svg');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
  }

  &__logo-container {
    width: 100%;
    height: 100%;
    display: block;

    &.js-menu--active,
    &:focus,
    &:hover,
    &:active {
      .logo-menu__logo-hover-bg {
        opacity: 1;
      }
    }
  }

  &__logo-hover-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  &__menu {
    list-style: none;
    flex-direction: column;
    position: absolute;
    padding: 0;
    display: flex;
    background-color: @_menu-colour;

    &--main {
      top: 100%;
      left: 0;
    }

    &--sub {
      top: 0;
      left: 100%;
    }
  }

  &__menu-item {
    &--separator {
      height: @spacing;
    }
  }

  &__menu-link {
    color: @_menu-text-colour;
    display: flex;

    &.js-menu--active,
    &:focus,
    &:hover,
    &:active {
      background-image: linear-gradient(to right, transparent @_stripe-width, @_menu-colour-hover @_stripe-width);
      color: @_menu-text-colour;
      text-decoration: none;

      .logo-menu__menu-stripe {
        opacity: 1;
      }
    }
  }

  &__menu-link-icon {
    padding-left: (@spacing * 2);
  }

  &__menu-stripe {
    width: @_stripe-width;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    &--hover {
      opacity: 0;
    }
  }

  &__menu-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 0 auto;
    padding: (@spacing / 2) @spacing (@spacing / 2) (@spacing * 2);
    font-size: 15px;

    &--sub {
      padding-right: (@spacing * 2);
    }
  }

  &__user {
    display: flex;
    background-size: cover;

    &--full {
      &:focus,
      &:hover,
      &:active {
        background-color: @_menu-colour-hover;
        text-decoration: none;
        color: @_menu-text-colour;
      }
    }
  }

  &__user-slice {
    padding: @spacing;
    color: @_menu-text-colour;

    &:focus,
    &:hover,
    &:active {
      background-color: @_menu-colour-hover;
      text-decoration: none;
      color: @_menu-text-colour;
    }

    &--avatar {
      @_avatar-size: 40px;
      width: (@spacing * 2 + @_avatar-size);
      height: (@spacing * 2 + @_avatar-size);
      padding: @spacing;
    }

    &--bg {
      background-color: fade(@grey-0, 50%);
    }

    &--session {
      flex: 1 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;

    }
  }
}


animations separated

animations separated

@import "/src/frontend/css/reusable/common.less";

.slide-reveal {
  .box-transition(0.3s linear all);
  opacity:0.5;

  position:relative;
  opacity:0;
  left:10px;
}

.slide-reveal.slide-reveal-active {
  left:0;
  opacity:1;
}

.expand-enter {
  .box-transition(0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all);
  opacity:0;
  max-height:0;
  overflow:hidden;
}

.expand-enter.expand-enter-active {
  opacity:1;
  max-height:40px;
}

.expand-leave {
  .box-transition(0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all);

  opacity:1;
  max-height:40px;
  overflow:hidden;
}

.expand-leave.expand-leave-active {
  opacity:0;
  max-height:0;
}

error: pathspec 'src/hosts/docs/static/css/angular-animations.less' did not match any file(s) known to git


fixed background attachment

fixed background attachment

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/amazingBastard/excuse-generator.git/'


upgrade to play 2.1.5 and neo4j 1.9.4

upgrade to play 2.1.5 and neo4j 1.9.4

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


fixed close background for JS

fixed close background for JS

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


Add empty stylesheet for Atom

Add empty stylesheet for Atom

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 *
 * If you are unfamiliar with LESS, you can read more about it here:
 * http://www.lesscss.org
 *
 * save as ~/.atom/style.less
 */

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


Add rule for search results

Add rule for search results

fatal: unable to access 'https://github.com/nviel/nico-syntax.git/': The requested URL returned error: 403


Fixed overlay hover on mobile devices

Fixed overlay hover on mobile devices

// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `uk-overlay`
//
// Sub-objects:     `uk-overlay-panel`
//                  `uk-overlay-hover`
//                  `uk-overlay-active`
//                  `uk-overlay-icon`
//
// Modifier:        `uk-overlay-background`
//                  `uk-overlay-image`
//                  `uk-overlay-top`
//                  `uk-overlay-bottom`
//                  `uk-overlay-left`
//                  `uk-overlay-right`
//                  `uk-overlay-fade`
//                  `uk-overlay-scale`
//                  `uk-overlay-spin`
//                  `uk-overlay-grayscale`
//                  `uk-overlay-slide-top`
//                  `uk-overlay-slide-bottom`
//                  `uk-overlay-slide-left`
//                  `uk-overlay-slide-right`
//
// DEPRECATED:      `uk-overlay-area`
//                  `uk-overlay-area-content`
//                  `uk-overlay-caption`
//                  `uk-overlay-toggle`
//
// States:          `uk-hover`
//                  `uk-active`
//                  `uk-ignore`
//
// Uses:            Icon: `[class*='uk-icon-']`
//                  `uk-border-circle`
//
// Markup:
//
//
//

//
//

//

//
// ========================================================================

// Variables
// ========================================================================

@overlay-panel-padding:                         20px;
@overlay-panel-color:                           #fff;

@overlay-panel-background:                      rgba(0,0,0,0.5);

@overlay-icon:                                  "\f002";
@overlay-icon-size:                             50px;
@overlay-icon-color:                            #fff;

@overlay-fade-in-opacity:                       1;
@overlay-fade-out-opacity:                      0.7;

@overlay-scale-in-scale:                        1.1;
@overlay-scale-out-scale:                       1;

@overlay-spin-in-scale:                         1.1;
@overlay-spin-out-scale:                        1;
@overlay-spin-in-rotate:                        3deg;
@overlay-spin-out-rotate:                       0deg;

@overlay-panel-link-color:                      inherit;
@overlay-panel-link-text-decoration:            underline;

// DEPRECATED
@overlay-area-background:                       rgba(0,0,0,0.3);

@overlay-area-icon:                             "\f002";
@overlay-area-icon-size:                        50px;
@overlay-area-icon-color:                       #fff;

@overlay-area-content-font-size:                1rem;
@overlay-area-content-padding-horizontal:       15px;
@overlay-area-content-color:                    #fff;
@overlay-area-content-link-color:               inherit;

@overlay-caption-background:                    rgba(0,0,0,0.5);
@overlay-caption-padding:                       15px;
@overlay-caption-color:                         #fff;

/* ========================================================================
   Component: Overlay
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 * 5. Needed for transitions and to fixed wrong scaling calculation for images in Chrome
 * 6. Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
 * 7. Reset margin
 */

.uk-overlay {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    overflow: hidden;
    /* 6 */
    -webkit-transform: translateZ(0);
    /* 7 */
    margin: 0;
}

/* 6 for Safari */
.uk-overlay.uk-border-circle { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

/*
 * Remove margin from content
 */

.uk-overlay > :first-child { margin-bottom: 0; }

/* Sub-object `uk-overlay-panel`
 ========================================================================== */

/*
 * 1. Position cover
 * 2. Style
 */

.uk-overlay-panel {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    padding: @overlay-panel-padding;
    color: @overlay-panel-color;
    .hook-overlay-panel;
}

/*
 * Remove margin from the last-child
 */

.uk-overlay-panel > :last-child,
.uk-overlay-panel.uk-flex > * > :last-child { margin-bottom: 0; }

/*
 * Keep color for headings if the default heading color is changed
 */

.uk-overlay-panel h1,
.uk-overlay-panel h2,
.uk-overlay-panel h3,
.uk-overlay-panel h4,
.uk-overlay-panel h5,
.uk-overlay-panel h6 { color: inherit; }

.uk-overlay-panel a:not([class]) {
    color: @overlay-panel-link-color;
    text-decoration: @overlay-panel-link-text-decoration;
}

.uk-overlay-panel a[class*='uk-icon-']:not(.uk-icon-button) { color: @overlay-panel-link-color; }

/* Sub-object `uk-overlay-hover` and `uk-overlay-active`
 ========================================================================== */

.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) { opacity: 0; }

.uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) { opacity: 0; }

/* Modifier `uk-overlay-background`
 ========================================================================== */

.uk-overlay-background {
    background: @overlay-panel-background;
    .hook-overlay-background;
}

/* Modifier `uk-overlay-image`
 ========================================================================== */

/*
 * Reset panel
 */

.uk-overlay-image {
    padding: 0;
    .hook-overlay-image;
}

/* Position modifiers
 ========================================================================== */

.uk-overlay-top { bottom: auto; }

.uk-overlay-bottom { top: auto; }

.uk-overlay-left { right: auto; }

.uk-overlay-right { left: auto; }

/* Sub-object `uk-overlay-icon`
 ========================================================================== */

.uk-overlay-icon:before {
    content: @overlay-icon;
    position: absolute;
    top: 50%;
    left: 50%;
    width: @overlay-icon-size;
    height: @overlay-icon-size;
    margin-top: -(@overlay-icon-size / 2);
    margin-left: -(@overlay-icon-size / 2);
    font-size: @overlay-icon-size;
    line-height: 1;
    font-family: FontAwesome;
    text-align: center;
    color: @overlay-icon-color;
    .hook-overlay-icon;
}

/* Transitions
 ========================================================================== */

.uk-overlay-fade,
.uk-overlay-scale,
.uk-overlay-spin,
.uk-overlay-grayscale,
.uk-overlay-blur,
[class*='uk-overlay-slide'] {
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-property: opacity, transform, filter;
}

.uk-overlay-active .uk-overlay-fade,
.uk-overlay-active .uk-overlay-scale,
.uk-overlay-active .uk-overlay-spin,
.uk-overlay-active [class*='uk-overlay-slide'] { transition-duration: 0.8s; }

/*
 * Fade
 */

.uk-overlay-fade { opacity: @overlay-fade-out-opacity; }

.uk-overlay-hover:hover .uk-overlay-fade,
.uk-overlay-hover.uk-hover .uk-overlay-fade,
.uk-overlay-active .uk-active > .uk-overlay-fade { opacity: @overlay-fade-in-opacity; }

/*
 * Scale
 */

.uk-overlay-scale {
    -webkit-transform: scale(@overlay-scale-out-scale);
    transform: scale(@overlay-scale-out-scale);
}

.uk-overlay-hover:hover .uk-overlay-scale,
.uk-overlay-hover.uk-hover .uk-overlay-scale,
.uk-overlay-active .uk-active > .uk-overlay-scale {
    -webkit-transform: scale(@overlay-scale-in-scale);
    transform: scale(@overlay-scale-in-scale);
}

/*
 * Spin
 */

.uk-overlay-spin {
    -webkit-transform: scale(@overlay-spin-out-scale) rotate(@overlay-spin-out-rotate);
    transform: scale(@overlay-spin-out-scale) rotate(@overlay-spin-out-rotate);
}

.uk-overlay-hover:hover .uk-overlay-spin,
.uk-overlay-hover.uk-hover .uk-overlay-spin,
.uk-overlay-active .uk-active > .uk-overlay-spin {
    -webkit-transform: scale(@overlay-spin-in-scale) rotate(@overlay-spin-in-rotate);
    transform: scale(@overlay-spin-in-scale) rotate(@overlay-spin-in-rotate);
}

/*
 * Grayscale
 */

.uk-overlay-grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.uk-overlay-hover:hover .uk-overlay-grayscale,
.uk-overlay-hover.uk-hover .uk-overlay-grayscale,
.uk-overlay-active .uk-active > .uk-overlay-grayscale {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/*
 * Slide
 */

[class*='uk-overlay-slide'] { opacity: 0; }

/* Top */
.uk-overlay-slide-top {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

/* Bottom */
.uk-overlay-slide-bottom {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

/* Left */
.uk-overlay-slide-left {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/* Right */
.uk-overlay-slide-right {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

/* Hover */
.uk-overlay-hover:hover [class*='uk-overlay-slide'],
.uk-overlay-hover.uk-hover [class*='uk-overlay-slide'],
.uk-overlay-active .uk-active > [class*='uk-overlay-slide'] {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
}

/* DEPRECATED
 * Sub-object `uk-overlay-area`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-area {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    background: @overlay-area-background;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    .hook-overlay-area;
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-area,
.uk-overlay.uk-hover .uk-overlay-area, // 1
.uk-overlay-toggle:hover .uk-overlay-area, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-area { opacity: 1; }

/*
 * Icon
 */

.uk-overlay-area:empty:before {
    content: @overlay-area-icon;
    position: absolute;
    top: 50%;
    left: 50%;
    width: @overlay-area-icon-size;
    height: @overlay-area-icon-size;
    margin-top: -(@overlay-area-icon-size / 2);
    margin-left: -(@overlay-area-icon-size / 2);
    font-size: @overlay-area-icon-size;
    line-height: 1;
    font-family: FontAwesome;
    text-align: center;
    color: @overlay-area-icon-color;
    .hook-overlay-area-icon;
}

/* DEPRECATED
 * Sub-object `uk-overlay-area-content`
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 * Needed for Firefox
 */

.uk-overlay-area:not(:empty) { font-size: 0.001px; }

/*
 * 1. Needed for vertical alignment
 */

.uk-overlay-area:not(:empty):before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*
 * 1. Set vertical alignment
 * 2. Reset whitespace hack
 * 3. Set horizontal alignment
 * 4. Set style
 */

.uk-overlay-area-content {
    /* 1 */
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;
    /* 2 */
    font-size: @overlay-area-content-font-size;
    /* 3 */
    text-align: center;
    /* 4 */
    padding: 0 @overlay-area-content-padding-horizontal;
    color: @overlay-area-content-color;
    .hook-overlay-area-content;
}

/*
 * Remove margin from the last-child
 */

.uk-overlay-area-content > :last-child { margin-bottom: 0; }

/*
 * Links in overlay area
 */

.uk-overlay-area-content a:not([class]),
.uk-overlay-area-content a:not([class]):hover { color: @overlay-area-content-link-color; }

/* DEPRECATED
 * Sub-object `uk-overlay-caption`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-caption {
    /* 1 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    padding: @overlay-caption-padding;
    background: @overlay-caption-background;
    color: @overlay-caption-color;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    .hook-overlay-caption;
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-caption,
.uk-overlay.uk-hover .uk-overlay-caption, // 1
.uk-overlay-toggle:hover .uk-overlay-caption, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-caption { opacity: 1; }

// Hooks
// ========================================================================

.hook-overlay-misc;

.hook-overlay-panel() {}
.hook-overlay-background() {}
.hook-overlay-image() {}
.hook-overlay-icon() {}
.hook-overlay-misc() {}

// DEPRECATED
.hook-overlay-area() {}
.hook-overlay-area-icon() {}
.hook-overlay-area-content() {}
.hook-overlay-caption() {}

// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `uk-overlay`
//
// Sub-objects:     `uk-overlay-panel`
//                  `uk-overlay-hover`
//                  `uk-overlay-active`
//                  `uk-overlay-icon`
//
// Modifier:        `uk-overlay-background`
//                  `uk-overlay-image`
//                  `uk-overlay-top`
//                  `uk-overlay-bottom`
//                  `uk-overlay-left`
//                  `uk-overlay-right`
//                  `uk-overlay-fade`
//                  `uk-overlay-scale`
//                  `uk-overlay-spin`
//                  `uk-overlay-grayscale`
//                  `uk-overlay-slide-top`
//                  `uk-overlay-slide-bottom`
//                  `uk-overlay-slide-left`
//                  `uk-overlay-slide-right`
//
// DEPRECATED:      `uk-overlay-area`
//                  `uk-overlay-area-content`
//                  `uk-overlay-caption`
//                  `uk-overlay-toggle`
//
// States:          `uk-hover`
//                  `uk-active`
//                  `uk-ignore`
//
// Uses:            Icon: `[class*='uk-icon-']`
//                  `uk-border-circle`
//
// Markup:
//
//
//

//
//

//

//
// ========================================================================

// Variables
// ========================================================================

@overlay-panel-padding:                         20px;
@overlay-panel-color:                           #fff;

@overlay-panel-background:                      rgba(0,0,0,0.5);

@overlay-icon:                                  "\f002";
@overlay-icon-size:                             50px;
@overlay-icon-color:                            #fff;

@overlay-fade-in-opacity:                       1;
@overlay-fade-out-opacity:                      0.7;

@overlay-scale-in-scale:                        1.1;
@overlay-scale-out-scale:                       1;

@overlay-spin-in-scale:                         1.1;
@overlay-spin-out-scale:                        1;
@overlay-spin-in-rotate:                        3deg;
@overlay-spin-out-rotate:                       0deg;

@overlay-panel-link-color:                      inherit;
@overlay-panel-link-text-decoration:            underline;

// DEPRECATED
@overlay-area-background:                       rgba(0,0,0,0.3);

@overlay-area-icon:                             "\f002";
@overlay-area-icon-size:                        50px;
@overlay-area-icon-color:                       #fff;

@overlay-area-content-font-size:                1rem;
@overlay-area-content-padding-horizontal:       15px;
@overlay-area-content-color:                    #fff;
@overlay-area-content-link-color:               inherit;

@overlay-caption-background:                    rgba(0,0,0,0.5);
@overlay-caption-padding:                       15px;
@overlay-caption-color:                         #fff;

/* ========================================================================
   Component: Overlay
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 * 5. Needed for transitions and to fixed wrong scaling calculation for images in Chrome
 * 6. Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
 * 7. Reset margin
 */

.uk-overlay {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    overflow: hidden;
    /* 6 */
    -webkit-transform: translateZ(0);
    /* 7 */
    margin: 0;
}

/* 6 for Safari */
.uk-overlay.uk-border-circle { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

/*
 * Remove margin from content
 */

.uk-overlay > :first-child { margin-bottom: 0; }

/* Sub-object `uk-overlay-panel`
 ========================================================================== */

/*
 * 1. Position cover
 * 2. Style
 */

.uk-overlay-panel {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    padding: @overlay-panel-padding;
    color: @overlay-panel-color;
    .hook-overlay-panel;
}

/*
 * Remove margin from the last-child
 */

.uk-overlay-panel > :last-child,
.uk-overlay-panel.uk-flex > * > :last-child { margin-bottom: 0; }

/*
 * Keep color for headings if the default heading color is changed
 */

.uk-overlay-panel h1,
.uk-overlay-panel h2,
.uk-overlay-panel h3,
.uk-overlay-panel h4,
.uk-overlay-panel h5,
.uk-overlay-panel h6 { color: inherit; }

.uk-overlay-panel a:not([class]) {
    color: @overlay-panel-link-color;
    text-decoration: @overlay-panel-link-text-decoration;
}

.uk-overlay-panel a[class*='uk-icon-']:not(.uk-icon-button) { color: @overlay-panel-link-color; }

/* Sub-object `uk-overlay-hover` and `uk-overlay-active`
 ========================================================================== */

.uk-overlay-hover:not(:hover):not(.uk-hover) .uk-overlay-panel:not(.uk-ignore) { opacity: 0; }

.uk-overlay-active :not(.uk-active) > .uk-overlay-panel:not(.uk-ignore) { opacity: 0; }

/* Modifier `uk-overlay-background`
 ========================================================================== */

.uk-overlay-background {
    background: @overlay-panel-background;
    .hook-overlay-background;
}

/* Modifier `uk-overlay-image`
 ========================================================================== */

/*
 * Reset panel
 */

.uk-overlay-image {
    padding: 0;
    .hook-overlay-image;
}

/* Position modifiers
 ========================================================================== */

.uk-overlay-top { bottom: auto; }

.uk-overlay-bottom { top: auto; }

.uk-overlay-left { right: auto; }

.uk-overlay-right { left: auto; }

/* Sub-object `uk-overlay-icon`
 ========================================================================== */

.uk-overlay-icon:before {
    content: @overlay-icon;
    position: absolute;
    top: 50%;
    left: 50%;
    width: @overlay-icon-size;
    height: @overlay-icon-size;
    margin-top: -(@overlay-icon-size / 2);
    margin-left: -(@overlay-icon-size / 2);
    font-size: @overlay-icon-size;
    line-height: 1;
    font-family: FontAwesome;
    text-align: center;
    color: @overlay-icon-color;
    .hook-overlay-icon;
}

/* Transitions
 ========================================================================== */

.uk-overlay-fade,
.uk-overlay-scale,
.uk-overlay-spin,
.uk-overlay-grayscale,
.uk-overlay-blur,
[class*='uk-overlay-slide'] {
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-property: opacity, transform, filter;
}

.uk-overlay-active .uk-overlay-fade,
.uk-overlay-active .uk-overlay-scale,
.uk-overlay-active .uk-overlay-spin,
.uk-overlay-active [class*='uk-overlay-slide'] { transition-duration: 0.8s; }

/*
 * Fade
 */

.uk-overlay-fade { opacity: @overlay-fade-out-opacity; }

.uk-overlay-hover:hover .uk-overlay-fade,
.uk-overlay-active .uk-active > .uk-overlay-fade { opacity: @overlay-fade-in-opacity; }

/*
 * Scale
 */

.uk-overlay-scale {
    -webkit-transform: scale(@overlay-scale-out-scale);
    transform: scale(@overlay-scale-out-scale);
}

.uk-overlay-hover:hover .uk-overlay-scale,
.uk-overlay-active .uk-active > .uk-overlay-scale {
    -webkit-transform: scale(@overlay-scale-in-scale);
    transform: scale(@overlay-scale-in-scale);
}

/*
 * Spin
 */

.uk-overlay-spin {
    -webkit-transform: scale(@overlay-spin-out-scale) rotate(@overlay-spin-out-rotate);
    transform: scale(@overlay-spin-out-scale) rotate(@overlay-spin-out-rotate);
}

.uk-overlay-hover:hover .uk-overlay-spin,
.uk-overlay-active .uk-active > .uk-overlay-spin {
    -webkit-transform: scale(@overlay-spin-in-scale) rotate(@overlay-spin-in-rotate);
    transform: scale(@overlay-spin-in-scale) rotate(@overlay-spin-in-rotate);
}

/*
 * Grayscale
 */

.uk-overlay-grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.uk-overlay-hover:hover .uk-overlay-grayscale,
.uk-overlay-active .uk-active > .uk-overlay-grayscale {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/*
 * Slide
 */

[class*='uk-overlay-slide'] { opacity: 0; }

/* Top */
.uk-overlay-slide-top {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

/* Bottom */
.uk-overlay-slide-bottom {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

/* Left */
.uk-overlay-slide-left {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/* Right */
.uk-overlay-slide-right {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

/* Hover */
.uk-overlay-hover:hover [class*='uk-overlay-slide'],
.uk-overlay-active .uk-active > [class*='uk-overlay-slide'] {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
}

/* DEPRECATED
 * Sub-object `uk-overlay-area`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-area {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    background: @overlay-area-background;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    .hook-overlay-area;
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-area,
.uk-overlay.uk-hover .uk-overlay-area, // 1
.uk-overlay-toggle:hover .uk-overlay-area, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-area { opacity: 1; }

/*
 * Icon
 */

.uk-overlay-area:empty:before {
    content: @overlay-area-icon;
    position: absolute;
    top: 50%;
    left: 50%;
    width: @overlay-area-icon-size;
    height: @overlay-area-icon-size;
    margin-top: -(@overlay-area-icon-size / 2);
    margin-left: -(@overlay-area-icon-size / 2);
    font-size: @overlay-area-icon-size;
    line-height: 1;
    font-family: FontAwesome;
    text-align: center;
    color: @overlay-area-icon-color;
    .hook-overlay-area-icon;
}

/* DEPRECATED
 * Sub-object `uk-overlay-area-content`
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 * Needed for Firefox
 */

.uk-overlay-area:not(:empty) { font-size: 0.001px; }

/*
 * 1. Needed for vertical alignment
 */

.uk-overlay-area:not(:empty):before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*
 * 1. Set vertical alignment
 * 2. Reset whitespace hack
 * 3. Set horizontal alignment
 * 4. Set style
 */

.uk-overlay-area-content {
    /* 1 */
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;
    /* 2 */
    font-size: @overlay-area-content-font-size;
    /* 3 */
    text-align: center;
    /* 4 */
    padding: 0 @overlay-area-content-padding-horizontal;
    color: @overlay-area-content-color;
    .hook-overlay-area-content;
}

/*
 * Remove margin from the last-child
 */

.uk-overlay-area-content > :last-child { margin-bottom: 0; }

/*
 * Links in overlay area
 */

.uk-overlay-area-content a:not([class]),
.uk-overlay-area-content a:not([class]):hover { color: @overlay-area-content-link-color; }

/* DEPRECATED
 * Sub-object `uk-overlay-caption`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-caption {
    /* 1 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    padding: @overlay-caption-padding;
    background: @overlay-caption-background;
    color: @overlay-caption-color;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    .hook-overlay-caption;
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-caption,
.uk-overlay.uk-hover .uk-overlay-caption, // 1
.uk-overlay-toggle:hover .uk-overlay-caption, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-caption { opacity: 1; }

// Hooks
// ========================================================================

.hook-overlay-misc;

.hook-overlay-panel() {}
.hook-overlay-background() {}
.hook-overlay-image() {}
.hook-overlay-icon() {}
.hook-overlay-misc() {}

// DEPRECATED
.hook-overlay-area() {}
.hook-overlay-area-icon() {}
.hook-overlay-area-content() {}
.hook-overlay-caption() {}


Updated the flex property for the latest chrome version

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


add TODO comment for popovers

add TODO comment for popovers

fatal: unable to access 'https://github.com/Livefyre/livefyre-bootstrap.git/': The requested URL returned error: 403


Add compiled less config

Add compiled less config

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


Selection less function

Selection less function

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


remove @ui-line-height variable

remove @ui-line-height variable

fixes #58

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/danosier/context-git.git/'


Create cs.less

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


Create flat.less

Create flat.less

// Author: Chris Kempson (http://chriskempson.com)
// Custom: Mathieu de Gouville (https://degouville.com/)
@base16-color-base00: #222222; //#2C3E50;
@base16-color-base01: #2A2A2A; //#34495E;
@base16-color-base02: #1A1A1A; //#7F8C8D;
@base16-color-base03: #444444; //#95A5A6;
@base16-color-base04: #BDC3C7;
@base16-color-base05: #E0E0E0;
@base16-color-base06: #F5F5F5;
@base16-color-base07: #ECF0F1;
@base16-color-base08: #E74C3C;
@base16-color-base09: #E67E22;
@base16-color-base0A: #F1C40F;
@base16-color-base0B: #2ECC71;
@base16-color-base0C: #1ABC9C;
@base16-color-base0D: #3498DB;
@base16-color-base0E: #9B59B6;
@base16-color-base0F: #BE643C;

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


Applying skipIE to all

Applying skipIE to all

/*!
 * Copyright 2013 Apereo Foundation (AF) Licensed under the
 * Educational Community 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://opensource.org/licenses/ECL-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.
 */

/*****************
 ** LESS Mixins **
 *****************/

.background-image-with-gradient(@image, @gradient1, @gradient2, @skipIE:false) {
    background-color: mix(@gradient1, @gradient2, 50%);
    background-image: url(@image) @gradient1;
    background-image: url(@image), -moz-linear-gradient(top, @gradient1 0%, @gradient2 100%);
    background-image: url(@image), -webkit-linear-gradient(top, @gradient1 0%, @gradient2 100%);
    background-image: url(@image), linear-gradient(to bottom, @gradient1 0%, @gradient2 100%);
}

.background-image-with-gradient(@image, @gradient1, @gradient2, @skipIE:false) when not (@skipIE) {
    /* IE9 */
    @iegradient1: argb(@gradient1);
    @iegradient2: argb(@gradient2);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@iegradient1, endColorstr=@iegradient2);
}

.background-gradient-two(@gradient1, @gradient2, @gradient1start:0%, @gradient2start:100%, @skipIE:false) {
    background: @gradient1;
    background-color: mix(@gradient1, @gradient2, 50%);
    background-image: linear-gradient(to bottom, @gradient1 @gradient1start, @gradient2 @gradient2start);
    background-image: -o-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start);
    background-image: -moz-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start);
    background-image: -webkit-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start);
}

.background-gradient-two(@gradient1, @gradient2, @gradient1start:0%, @gradient2start:100%, @skipIE:false) when not (@skipIE) {
    /* IE9 */
    @iegradient1: argb(@gradient1);
    @iegradient2: argb(@gradient2);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@iegradient1, endColorstr=@iegradient2);
}

.background-gradient-three(@gradient1, @gradient2, @gradient3, @gradient1start:0%, @gradient2start:50%, @gradient3start:100%, @skipIE:false) {
    background-image: linear-gradient(to bottom, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
    background-image: -o-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
    background-image: -moz-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
    background-image: -webkit-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
}

.background-gradient-three(@gradient1, @gradient2, @gradient3, @gradient1start:0%, @gradient2start:50%, @gradient3start:100%, @skipIE:false) when not (@skipIE) {
    /* IE9 */
    @iegradient1: argb(@gradient1);
    @iegradient3: argb(@gradient3);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@iegradient1, endColorstr=@iegradient3);
}

/************************
 ** @section  Branding **
 ************************/

/* Body background color */
@body-background-color: #ECEAE5;

body {
   background-color: @body-background-color;
}

/* Institutional logo */
@institutional-logo-url: '/shared/oae/img/oae-logo.png';

.oae-institutional-logo {
    background-image: url(@institutional-logo-url);
}

/* Branding image */
@branding-image-url: '/ui/img/index.png';
/* Branding gradient primary color */
@branding-gradient1-color: #0074A7;
/* Branding gradient secondary color */
@branding-gradient2-color: #25A9FD;

.oae-main-content.oae-branding-container {
    .background-image-with-gradient(@branding-image-url, @branding-gradient1-color, @branding-gradient2-color);
}

/***************************
 ** @section  Text colors **
 ***************************/

/* Plain text color */
@text-color: #333;

body, button, input, select, textarea,
.btn > i, a.oae-plain-link,
.popover-content, .popover-content button:not(.btn),
h1 [class^="icon-"], h1 [class*=" icon-"],
h2 [class^="icon-"], h2 [class*=" icon-"],
h3 [class^="icon-"], h3 [class*=" icon-"],
h4 [class^="icon-"], h4 [class*=" icon-"],
h5 [class^="icon-"], h5 [class*=" icon-"],
h6 [class^="icon-"], h6 [class*=" icon-"] {
    color: @text-color;
}

/* @subsection  Link colors */

/* Link color */
@link-color: #0088CC;
/* Link hover color */
@link-hover-color: #005580;

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

a:hover, .btn-link:hover {
    color: @link-hover-color;
}

.recaptchatable a {
    color: @link-color !important;
}

/***********************
 ** @section  Buttons **
 ***********************/

/* @subsection  Default button */

/* Default button text color */
@button-default-text-color: #333333;
/* Default button border */
@button-default-border-color: #E3E2DB;
/* Default button gradient primary color */
@button-default-gradient1-color: #FFF;
/* Default button gradient secondary color */
@button-default-gradient2-color: #E3E2DB;

.btn:not(.btn-link) {
    color: @button-default-text-color;
    border-color: @button-default-border-color;
    .background-gradient-two(@button-default-gradient1-color, @button-default-gradient2-color);
}

.btn:not(.btn-link):hover,
.btn:not(.btn-link):focus,
.btn:not(.btn-link):active,
.btn:not(.btn-link).active,
.btn:not(.btn-link).disabled,
.btn:not(.btn-link)[disabled] {
    color: @button-default-text-color;
    background-color: @button-default-gradient2-color;
}

/* @subsection  Primary button */

/* Primary button text color */
@button-primary-text-color: #FFF;
/* Primary button border */
@button-primary-border-color: #444;
/* Primary button gradient primary color */
@button-primary-gradient1-color: #555;
/* Primary button gradient secondary color */
@button-primary-gradient2-color: #222;

.btn.btn-primary {
    color: @button-primary-text-color;
    border-color: @button-primary-border-color;
    .background-gradient-two(@button-primary-gradient1-color, @button-primary-gradient2-color);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.disabled,
.btn.btn-primary[disabled] {
    color: @button-primary-text-color;
    background-color: @button-primary-gradient2-color;
}

/* @subsection  Success button */

/* Success button text color */
@button-success-text-color: #FFF;
/* Success button border */
@button-success-border-color: #51A351;
/* Success button gradient primary color */
@button-success-gradient1-color: #62C462;
/* Success button gradient secondary color */
@button-success-gradient2-color: #51A351;

.btn.btn-success {
    color: @button-success-text-color;
    border-color: @button-success-border-color;
    .background-gradient-two(@button-success-gradient1-color, @button-success-gradient2-color);
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-success.disabled,
.btn.btn-success[disabled] {
    color: @button-success-text-color;
    background-color: @button-success-gradient2-color;
}

/* @subsection  Warning button */

/* Warning button text color */
@button-warning-text-color: #FFF;
/* Warning button border */
@button-warning-border-color: #F89406;
/* Warning button gradient primary color */
@button-warning-gradient1-color: #FBB450;
/* Warning button gradient secondary color */
@button-warning-gradient2-color: #F89406;

.btn.btn-warning {
    color: @button-warning-text-color;
    border-color: @button-warning-border-color;
    .background-gradient-two(@button-warning-gradient1-color, @button-warning-gradient2-color);
}

.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning.disabled,
.btn.btn-warning[disabled] {
    color: @button-warning-text-color;
    background-color: @button-warning-gradient2-color;
}

/* @subsection  Danger button */

/* Danger button text color */
@button-danger-text-color: #FFF;
/* Danger button border */
@button-danger-border-color: #BD362F;
/* Danger button gradient primary color */
@button-danger-gradient1-color: #EE5F5B;
/* Danger button gradient secondary color */
@button-danger-gradient2-color: #BD362F;

.btn.btn-danger {
    color: @button-danger-text-color;
    border-color: @button-danger-border-color;
    .background-gradient-two(@button-danger-gradient1-color, @button-danger-gradient2-color);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-danger.disabled,
.btn.btn-danger[disabled] {
    color: @button-danger-text-color;
    background-color: @button-danger-gradient2-color;
}

/* @subsection  Inverse button */

/* Inverse button text color */
@button-inverse-text-color: #FFF;
/* Inverse button border */
@button-inverse-border-color: #333;
/* Inverse button gradient primary color */
@button-inverse-gradient1-color: #333;
/* Inverse button gradient secondary color */
@button-inverse-gradient2-color: #666;

.btn.btn-inverse {
    color: @button-inverse-text-color;
    border-color: @button-inverse-border-color;
    .background-gradient-two(@button-inverse-gradient1-color, @button-inverse-gradient2-color);
}

.btn.btn-inverse:hover,
.btn.btn-inverse:focus,
.btn.btn-inverse:active,
.btn.btn-inverse.active,
.btn.btn-inverse.disabled,
.btn.btn-inverse[disabled] {
    color: @button-inverse-text-color;
    background-color: @button-inverse-gradient2-color;
}

/* @subsection  Icon button */

/* Icon button color */
@button-icon-color: #A9A9A9;
/* Icon button hover color */
@button-icon-hover-color: #555;

[class^="icon-"], [class*=" icon-"],
.btn.btn-link [class^="icon-"], .btn.btn-link [class*=" icon-"] {
   color: @button-icon-color;
}

[class^="icon-"].active, [class*=" icon-"].active,
[class^="icon-"]:hover, [class*=" icon-"]:hover,
[class^="icon-"]:focus, [class*=" icon-"]:focus,
[class^="icon-"].selected, [class*=" icon-"].selected,
.btn-link [class^="icon-"].active, .btn-link:hover [class*=" icon-"].active,
.btn-link:hover [class^="icon-"], .btn-link:hover [class*=" icon-"],
.btn-link:focus [class^="icon-"], .btn-link:focus [class*=" icon-"] {
    color: @button-icon-hover-color;
}

/*********************
 ** @section  Forms **
 *********************/

/* Form field border color */
@form-border-color: #CCC;
/* Selected form field color */
@form-selected-color: rgba(82, 168, 236, 0.8);

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
ul.as-selections {
    border-color: @form-border-color;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
ul.as-selections.as-selections-focus {
    border-color: @form-selected-color;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @form-selected-color;
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @form-selected-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @form-selected-color;
}

/*********************
 ** @section  Well **
 *********************/

/* Well background color */
@well-background-color: #F5F5F5;
/* Well border color */
@well-border-color: #E3E3E3;

.well {
  background-color: @well-background-color;
  border-color: @well-border-color;
}

/*******************************************************
 ** @section  Modal dialogs, dropdowns and clickovers **
 *******************************************************/

/* Background gradient primary color */
@modal-gradient1-color: #FFF;
/* Background gradient secondary color */
@modal-gradient2-color: #F5F5F5;
/* Modal dialog title color */
@modal-title-color: #777;

.modal, .dropdown-menu, .popover {
    /* Don't render gradient in IE, as the overflow caused by it will result in autosuggest
       Results being cut off. https://github.com/oaeproject/3akai-ux/pull/2909 */
    .background-gradient-two(@modal-gradient1-color, @modal-gradient2-color, true);
}

.popover.top .arrow:after,
.popover.right .arrow:after,
.popover.bottom .arrow:after,
.popover.left .arrow:after {
    border-bottom-color: @modal-gradient1-color;
}

.modal-header h3, .modal-body h4 {
    color: @modal-title-color;
}

/*****************************
 ** @section  Notifications **
 *****************************/

/* @subsection  Success notification */

/* Success notification text color */
@notification-success-text-color: #666;
/* Success notification border color */
@notification-success-border-color: #CCC;
/* Success notification background color */
@notification-success-background-color: #F5F4F2;

.alert-success, .alert-success h4 {
    color: @notification-success-text-color;
}

.alert-success {
    border-color: @notification-success-border-color;
    background-color: @notification-success-background-color;
}

/* @subsection  Error notification */

/* Error notification text color */
@notification-error-text-color: #B94A48;
/* Error notification border color */
@notification-error-border-color: #EED3D7;
/* Error notification background color */
@notification-error-background-color: #F2DEDE;

.alert-danger, .alert-danger h4,
.alert-error, .alert-error h4 {
    color: @notification-error-text-color;
}

.alert-danger,
.alert-error {
    border-color: @notification-error-border-color;
    background-color: @notification-error-background-color;
}

/* @subsection  Info notification */

/* Info notification text color */
@notification-info-text-color: #3A87AD;
/* Info notification border color */
@notification-info-border-color: #BCE8F1;
/* Info notification background color */
@notification-info-background-color: #D9EDF7;

.alert-info, .alert-info h4 {
    color: @notification-info-text-color;
}

.alert-info {
    border-color: @notification-info-border-color;
    background-color: @notification-info-background-color;
}

/************************************
 ** @section  Left hand navigation **
 ************************************/

/* Left hand navigation item text color */
@lhnav-item-text-color: #999;
/* Left hand navigation item hover text color */
@lhnav-item-text-hover-color: #333;
/* Left hand navigation item selected text color */
@lhnav-item-text-selected-color: #333;
/* Left hand navigation item background color */
@lhnav-item-background-color: transparent;
/* Left hand navigation item hover background color */
@lhnav-item-background-hover-color: transparent;
/* Left hand navigation item selected background color */
@lhnav-item-background-selected-color: transparent;

.nav > li > a,
.nav > li i,
.nav > li.nav-header {
    color: @lhnav-item-text-color;
    background-color: @lhnav-item-background-color;
}

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:hover i,
.nav > li > a:focus i {
    color: @lhnav-item-text-hover-color;
    background-color: @lhnav-item-background-hover-color;
}

.nav > li.active > a,
.nav > li.active > a:hover,
.nav > li.active > a:focus,
.nav > li.active i {
    color: @lhnav-item-text-selected-color;
    background-color: @lhnav-item-background-selected-color;
}

/*********************************
 ** @section  Tabs **
 *********************************/

/* Tab text color */
@tabbed-nav-text-color: #999;
/* Tab text hover color */
@tabbed-nav-text-hover-color: #333;
/* Selected tab text color */
@tabbed-nav-text-selected-color: #333;
/* Tab background color */
@tabbed-nav-background-color: transparent;
/* Tab background hover color */
@tabbed-nav-background-hover-color: transparent;
/* Selected tab background color */
@tabbed-nav-background-selected-color: #FFF;

.nav-tabs > li > a {
    color: @tabbed-nav-text-color;
    background-color: @tabbed-nav-background-color;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: @tabbed-nav-text-hover-color;
    background-color: @tabbed-nav-background-hover-color;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: @tabbed-nav-text-selected-color;
    background-color: @tabbed-nav-background-selected-color;
}

/****************************
 ** @section  Autosuggest **
 ****************************/

/* @subsection  Active item */

/* Active item text color */
@as-item-active-color: #2B3840;
/* Active item border color */
@as-item-active-border-color: #ACC3EC;
/* Active item background gradient primary color */
@as-item-active-gradient1-color: #DDEEFE;
/* Active item background gradient secondary color */
@as-item-active-gradient2-color: #BFE0F1;

/* Active item hover text color */
@as-item-active-hover-color: #2B3840;
/* Active item hover border color */
@as-item-active-hover-border-color: #ACC3EC;
/* Active item hover background gradient primary color */
@as-item-active-hover-gradient1-color: #DDEEFE;
/* Active item hover background gradient secondary color */
@as-item-active-hover-gradient2-color: #BFE0F1;

ul.as-selections li.as-selection-item,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected,
ul.as-selections.as-selections-focus li.as-selection-item.selected {
    .background-gradient-two(@as-item-active-gradient1-color, @as-item-active-gradient2-color);
    color: @as-item-active-color;
    border-color: @as-item-active-border-color;
}

ul.as-selections li.as-selection-item:hover,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected:hover,
ul.as-selections.as-selections-focus li.as-selection-item.selected:hover {
    .background-gradient-two(@as-item-active-hover-gradient1-color, @as-item-active-hover-gradient2-color);
    color: @as-item-active-hover-color;
    border-color: @as-item-active-hover-border-color;
}

ul.as-selections li.as-selection-item a.as-close,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected a.as-close {
    color: @as-item-active-border-color;
}

ul.as-selections li.as-selection-item:hover a.as-close,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected:hover a.as-close {
    color: @as-item-active-hover-border-color;
}

ul.as-selections li.as-selection-item a.as-close:hover,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected a.as-close:hover {
    color: @as-item-active-hover-color;
}

ul.as-list li.as-result-item.active {
    .background-gradient-two(@as-item-active-gradient1-color, @as-item-active-gradient2-color);
}

/* @subsection  Inactive item */

/* Inactive item text color */
@as-item-blur-color: #666;
/* Inactive item border color */
@as-item-blur-border-color: #BBB;
/* Inactive item background gradient primary color */
@as-item-blur-gradient1-color: #F4F4F4;
/* Inactive item background gradient secondary color */
@as-item-blur-gradient2-color: #D5D5D5;

ul.as-selections li.as-selection-item.blur {
    .background-gradient-two(@as-item-blur-gradient1-color, @as-item-blur-gradient2-color);
    color: @as-item-blur-color;
    border-color: @as-item-blur-border-color;
}

ul.as-selections li.as-selection-item.blur a.as-close {
    color: @as-item-blur-border-color;
}

/* @subsection  Ghost item */

/* Ghost item text color */
@as-item-ghost-color: #666;
/* Ghost item border color */
@as-item-ghost-border-color: #BBB;
/* Ghost item background gradient primary color */
@as-item-ghost-gradient1-color: #FFF;
/* Ghost item background gradient secondary color */
@as-item-ghost-gradient2-color: #FFF;

/* Ghost item hover text color */
@as-item-ghost-hover-color: #666;
/* Ghost item hover border color */
@as-item-ghost-hover-border-color: #BBB;

ul.as-selections li.as-selection-item.as-ghost-item {
    .background-gradient-two(@as-item-ghost-gradient1-color, @as-item-ghost-gradient2-color);
    color: @as-item-ghost-color;
    border-color: @as-item-ghost-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item:hover {
    .background-gradient-two(@as-item-ghost-gradient1-color, @as-item-ghost-gradient2-color);
    color: @as-item-ghost-hover-color;
    border-color: @as-item-ghost-hover-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item a.as-ghost-add i {
    color: @as-item-ghost-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item:hover a.as-ghost-add i {
    color: @as-item-ghost-hover-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item a.as-ghost-add i:hover {
    color: @as-item-ghost-hover-color;
}

/**************************
 ** @section  Thumbnails **
 **************************/

/* Thumbnail background gradient primary color */
@thumbnail-gradient1-color: #F8F8F6;
/* Thumbnail background gradient secondary color */
@thumbnail-gradient2-color: #E3E2DB;

div.oae-thumbnail {
    .background-gradient-two(@thumbnail-gradient1-color, @thumbnail-gradient2-color, 47%, 74%);
}

/*********************************
 ** @section  Visibility toggle **
 *********************************/

/* Visibility toggle background color */
@visibility-toggle-background-color: #FFF;
/* Visibility toggle selected primary color*/
@visibility-toggle-selected1-color: #9EB7E6;
/* Visibility toggle selected secondary color*/
@visibility-toggle-selected2-color: #DBEDFE;

.oae-large-options-container .oae-large-options {
    background-color: @visibility-toggle-background-color;
}

.oae-large-options-container label .oae-large-options.checked {
    border-color: @visibility-toggle-selected1-color;
    background-color: @visibility-toggle-selected2-color;
}

.oae-large-options-container .oae-large-options.checked + i {
    background-color: @visibility-toggle-selected1-color;
}

.oae-large-options-container .oae-large-options.checked + i:before {
    color: @visibility-toggle-background-color;
}

/*********************
 ** @section  Tiles **
 *********************/

/* Tile banner text color */
@tile-text-color: #FFF;
/* Tile banner background color */
@tile-background-color: rgba(0, 0, 0, 0.8);

.oae-tile > .oae-tile-metadata {
    background-color: @tile-background-color;
}

.oae-tile > .oae-tile-metadata, .oae-tile h3, .oae-tile h3 a {
    color: @tile-text-color;
}

/**************************
 ** @section  List items **
 **************************/

/* List item border color */
@listitem-border-color: #EEEDEB;

.oae-tile,
.oae-listitem,
.oae-list.oae-list-grid > li.oae-list-actions {
    border-color: @listitem-border-color;
}

/**********************
 ** @section  Panels **
 **********************/

/* @subsection  Primary panel */

/* Primary panel text color */
@panel-primary-text-color: #FFF;
/* Primary panel title color */
@panel-primary-title-color: #FFF;
/* Primary panel background color */
@panel-primary-background-color: transparent;

.oae-panel-primary {
    color: @panel-primary-text-color;
    background: @panel-primary-background-color;
}

.oae-panel-primary, .oae-panel-primary:before, .oae-panel-primary:after {
    border-color: @panel-primary-background-color;
}

.oae-panel-primary h1, .oae-panel-primary h2, .oae-panel-primary h3,
.oae-panel-primary h4, .oae-panel-primary h5, .oae-panel-primary h6,
.oae-panel-primary i, .oae-panel-primary i:hover {
    color: @panel-primary-title-color;
}

/* @subsection  Secondary pannel */

/* Secondary panel text color */
@panel-secondary-text-color: #FFF;
/* Secondary panel title color */
@panel-secondary-title-color: #FFF;
/* Secondary panel background color */
@panel-secondary-background-color: transparent;

.oae-panel-secondary {
    color: @panel-secondary-text-color;
    background: @panel-secondary-background-color;
}

.oae-panel-secondary, .oae-panel-secondary:before, .oae-panel-secondary:after {
    border-color: @panel-secondary-background-color;
}

.oae-panel-secondary h1, .oae-panel-secondary h2, .oae-panel-secondary h3,
.oae-panel-secondary h4, .oae-panel-secondary h5, .oae-panel-secondary h6,
.oae-panel-secondary i, .oae-panel-secondary i:hover {
    color: @panel-secondary-title-color;
}

/* @subsection  Tertiary panel */

/* Tertiary panel text color */
@panel-tertiary-text-color: #FFF;
/* Tertiary panel title color */
@panel-tertiary-title-color: #FFF;
/* Tertiary panel background color */
@panel-tertiary-background-color: rgba(255,255,255,0.3);

.oae-panel-tertiary {
    color: @panel-tertiary-text-color;
    background: @panel-tertiary-background-color;
}

.oae-panel-tertiary, .oae-panel-tertiary:before, .oae-panel-tertiary:after {
    border-color: @panel-tertiary-background-color;
}

.oae-panel-tertiary h1, .oae-panel-tertiary h2, .oae-panel-tertiary h3,
.oae-panel-tertiary h4, .oae-panel-tertiary h5, .oae-panel-tertiary h6,
.oae-panel-tertiary i, .oae-panel-tertiary i:hover {
    color: @panel-tertiary-title-color;
}

/*********************
 ** @section  Clips **
 *********************/

/* @subsection  Primary clip */

/* Primary clip text color */
@clip-primary-title-color: #DBDBDB;
/* Primary clip text hover color */
@clip-primary-hover-color: #FFF;
/* Primary clip description color */
@clip-primary-description-color: #999;
/* Primary clip background gradient primary color */
@clip-primary-gradient1-color: #545454;
/* Primary clip background gradient secondary color */
@clip-primary-gradient2-color: #000;

.oae-clip .oae-clip-fold .oae-clip-fold-outer {
    background-color: @clip-primary-gradient1-color;
}

.oae-clip .oae-clip-fold .oae-clip-fold-inner {
    background-color: @clip-primary-gradient2-color;
}

.oae-clip .oae-clip-content {
    .background-gradient-three(@clip-primary-gradient1-color, @clip-primary-gradient1-color, @clip-primary-gradient2-color, 0%, 10%, 100%);
}

.oae-clip .oae-clip-content,
.oae-clip .oae-clip-content > button,
.oae-clip .oae-clip-content ul li button,
.oae-clip .oae-clip-content i {
    color: @clip-primary-title-color;
}

.oae-clip button small {
    color: @clip-primary-description-color;
}

.oae-clip button:hover,
.oae-clip button:focus,
.oae-clip button:hover i,
.oae-clip button:focus i {
    color: @clip-primary-hover-color;
}

.oae-clip ul li button:hover {
    background-color: @clip-primary-gradient2-color;
}

/* @subsection  Secondary clip */

/* Secondary clip text color */
@clip-secondary-title-color: #F5F5F5;
/* Secondary clip text hover color */
@clip-secondary-hover-color: #FFF;
/* Secondary clip description color */
@clip-secondary-description-color: #DBDBDB;
/* Secondary clip background gradient primary color */
@clip-secondary-gradient1-color: #24A7DD;
/* Secondary clip background gradient secondary color */
@clip-secondary-gradient2-color: #0175A9;

.oae-clip.oae-clip-secondary .oae-clip-fold .oae-clip-fold-outer {
    background-color: @clip-secondary-gradient1-color;
}

.oae-clip.oae-clip-secondary .oae-clip-fold .oae-clip-fold-inner {
    background-color: @clip-secondary-gradient2-color;
}

.oae-clip.oae-clip-secondary .oae-clip-content {
    .background-gradient-three(@clip-secondary-gradient1-color, @clip-secondary-gradient1-color, @clip-secondary-gradient2-color, 0%, 10%, 100%);
}

.oae-clip.oae-clip-secondary .oae-clip-content,
.oae-clip.oae-clip-secondary .oae-clip-content button,
.oae-clip.oae-clip-secondary .oae-clip-content i {
    color: @clip-secondary-title-color;
}

.oae-clip.oae-clip-secondary button small {
    color: @clip-secondary-description-color;
}

.oae-clip.oae-clip-secondary button:hover,
.oae-clip.oae-clip-secondary button:focus,
.oae-clip.oae-clip-secondary button:hover i,
.oae-clip.oae-clip-secondary button:focus i {
    color: @clip-secondary-hover-color;
}

.oae-clip.oae-clip-secondary ul li button:hover {
    background-color: @clip-secondary-gradient2-color;
}

/*!
 * Copyright 2013 Apereo Foundation (AF) Licensed under the
 * Educational Community 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://opensource.org/licenses/ECL-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.
 */

/*****************
 ** LESS Mixins **
 *****************/

.background-image-with-gradient(@image, @gradient1, @gradient2) {
    background-image: url(@image) @gradient1;
    background-image: url(@image), -moz-linear-gradient(top, @gradient1 0%, @gradient2 100%);
    background-image: url(@image), -webkit-linear-gradient(top, @gradient1 0%, @gradient2 100%);
    background-image: url(@image), linear-gradient(to bottom, @gradient1 0%, @gradient2 100%);

    /* IE9 */
    @iegradient1: argb(@gradient1);
    @iegradient2: argb(@gradient2);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@iegradient1, endColorstr=@iegradient2);
}

.background-gradient-two(@gradient1, @gradient2, @gradient1start:0%, @gradient2start:100%, @skipIE: false) {
    background: @gradient1;
    /* Fallback to the middle color if there's no gradient support or we skipIE */
    background-color: mix(@gradient1, @gradient2, 50%);
    background-image: linear-gradient(to bottom, @gradient1 @gradient1start, @gradient2 @gradient2start);
    background-image: -o-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start);
    background-image: -moz-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start);
    background-image: -webkit-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start);
}

.background-gradient-two(@gradient1, @gradient2, @gradient1start:0%, @gradient2start:100%, @skipIE: false) when not (@skipIE) {
    /* IE9 */
    @iegradient1: argb(@gradient1);
    @iegradient2: argb(@gradient2);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@iegradient1, endColorstr=@iegradient2);
}

.background-gradient-three(@gradient1, @gradient2, @gradient3, @gradient1start:0%, @gradient2start:50%, @gradient3start:100%) {
    background: @gradient1;
    background-image: linear-gradient(to bottom, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
    background-image: -o-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
    background-image: -moz-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);
    background-image: -webkit-linear-gradient(top, @gradient1 @gradient1start, @gradient2 @gradient2start, @gradient3 @gradient3start);

    /* IE9 */
    @iegradient1: argb(@gradient1);
    @iegradient3: argb(@gradient3);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=@iegradient1, endColorstr=@iegradient3);
}

/************************
 ** @section  Branding **
 ************************/

/* Body background color */
@body-background-color: #ECEAE5;

body {
   background-color: @body-background-color;
}

/* Institutional logo */
@institutional-logo-url: '/shared/oae/img/oae-logo.png';

.oae-institutional-logo {
    background-image: url(@institutional-logo-url);
}

/* Branding image */
@branding-image-url: '/ui/img/index.png';
/* Branding gradient primary color */
@branding-gradient1-color: #0074A7;
/* Branding gradient secondary color */
@branding-gradient2-color: #25A9FD;

.oae-main-content.oae-branding-container {
    .background-image-with-gradient(@branding-image-url, @branding-gradient1-color, @branding-gradient2-color);
}

/***************************
 ** @section  Text colors **
 ***************************/

/* Plain text color */
@text-color: #333;

body, button, input, select, textarea,
.btn > i, a.oae-plain-link,
.popover-content, .popover-content button:not(.btn),
h1 [class^="icon-"], h1 [class*=" icon-"],
h2 [class^="icon-"], h2 [class*=" icon-"],
h3 [class^="icon-"], h3 [class*=" icon-"],
h4 [class^="icon-"], h4 [class*=" icon-"],
h5 [class^="icon-"], h5 [class*=" icon-"],
h6 [class^="icon-"], h6 [class*=" icon-"] {
    color: @text-color;
}

/* @subsection  Link colors */

/* Link color */
@link-color: #0088CC;
/* Link hover color */
@link-hover-color: #005580;

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

a:hover, .btn-link:hover {
    color: @link-hover-color;
}

.recaptchatable a {
    color: @link-color !important;
}

/***********************
 ** @section  Buttons **
 ***********************/

/* @subsection  Default button */

/* Default button text color */
@button-default-text-color: #333333;
/* Default button border */
@button-default-border-color: #E3E2DB;
/* Default button gradient primary color */
@button-default-gradient1-color: #FFF;
/* Default button gradient secondary color */
@button-default-gradient2-color: #E3E2DB;

.btn:not(.btn-link) {
    color: @button-default-text-color;
    border-color: @button-default-border-color;
    .background-gradient-two(@button-default-gradient1-color, @button-default-gradient2-color);
}

.btn:not(.btn-link):hover,
.btn:not(.btn-link):focus,
.btn:not(.btn-link):active,
.btn:not(.btn-link).active,
.btn:not(.btn-link).disabled,
.btn:not(.btn-link)[disabled] {
    color: @button-default-text-color;
    background-color: @button-default-gradient2-color;
}

/* @subsection  Primary button */

/* Primary button text color */
@button-primary-text-color: #FFF;
/* Primary button border */
@button-primary-border-color: #444;
/* Primary button gradient primary color */
@button-primary-gradient1-color: #555;
/* Primary button gradient secondary color */
@button-primary-gradient2-color: #222;

.btn.btn-primary {
    color: @button-primary-text-color;
    border-color: @button-primary-border-color;
    .background-gradient-two(@button-primary-gradient1-color, @button-primary-gradient2-color);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.disabled,
.btn.btn-primary[disabled] {
    color: @button-primary-text-color;
    background-color: @button-primary-gradient2-color;
}

/* @subsection  Success button */

/* Success button text color */
@button-success-text-color: #FFF;
/* Success button border */
@button-success-border-color: #51A351;
/* Success button gradient primary color */
@button-success-gradient1-color: #62C462;
/* Success button gradient secondary color */
@button-success-gradient2-color: #51A351;

.btn.btn-success {
    color: @button-success-text-color;
    border-color: @button-success-border-color;
    .background-gradient-two(@button-success-gradient1-color, @button-success-gradient2-color);
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-success.disabled,
.btn.btn-success[disabled] {
    color: @button-success-text-color;
    background-color: @button-success-gradient2-color;
}

/* @subsection  Warning button */

/* Warning button text color */
@button-warning-text-color: #FFF;
/* Warning button border */
@button-warning-border-color: #F89406;
/* Warning button gradient primary color */
@button-warning-gradient1-color: #FBB450;
/* Warning button gradient secondary color */
@button-warning-gradient2-color: #F89406;

.btn.btn-warning {
    color: @button-warning-text-color;
    border-color: @button-warning-border-color;
    .background-gradient-two(@button-warning-gradient1-color, @button-warning-gradient2-color);
}

.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning.disabled,
.btn.btn-warning[disabled] {
    color: @button-warning-text-color;
    background-color: @button-warning-gradient2-color;
}

/* @subsection  Danger button */

/* Danger button text color */
@button-danger-text-color: #FFF;
/* Danger button border */
@button-danger-border-color: #BD362F;
/* Danger button gradient primary color */
@button-danger-gradient1-color: #EE5F5B;
/* Danger button gradient secondary color */
@button-danger-gradient2-color: #BD362F;

.btn.btn-danger {
    color: @button-danger-text-color;
    border-color: @button-danger-border-color;
    .background-gradient-two(@button-danger-gradient1-color, @button-danger-gradient2-color);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-danger.disabled,
.btn.btn-danger[disabled] {
    color: @button-danger-text-color;
    background-color: @button-danger-gradient2-color;
}

/* @subsection  Inverse button */

/* Inverse button text color */
@button-inverse-text-color: #FFF;
/* Inverse button border */
@button-inverse-border-color: #333;
/* Inverse button gradient primary color */
@button-inverse-gradient1-color: #333;
/* Inverse button gradient secondary color */
@button-inverse-gradient2-color: #666;

.btn.btn-inverse {
    color: @button-inverse-text-color;
    border-color: @button-inverse-border-color;
    .background-gradient-two(@button-inverse-gradient1-color, @button-inverse-gradient2-color);
}

.btn.btn-inverse:hover,
.btn.btn-inverse:focus,
.btn.btn-inverse:active,
.btn.btn-inverse.active,
.btn.btn-inverse.disabled,
.btn.btn-inverse[disabled] {
    color: @button-inverse-text-color;
    background-color: @button-inverse-gradient2-color;
}

/* @subsection  Icon button */

/* Icon button color */
@button-icon-color: #A9A9A9;
/* Icon button hover color */
@button-icon-hover-color: #555;

[class^="icon-"], [class*=" icon-"],
.btn.btn-link [class^="icon-"], .btn.btn-link [class*=" icon-"] {
   color: @button-icon-color;
}

[class^="icon-"].active, [class*=" icon-"].active,
[class^="icon-"]:hover, [class*=" icon-"]:hover,
[class^="icon-"]:focus, [class*=" icon-"]:focus,
[class^="icon-"].selected, [class*=" icon-"].selected,
.btn-link [class^="icon-"].active, .btn-link:hover [class*=" icon-"].active,
.btn-link:hover [class^="icon-"], .btn-link:hover [class*=" icon-"],
.btn-link:focus [class^="icon-"], .btn-link:focus [class*=" icon-"] {
    color: @button-icon-hover-color;
}

/*********************
 ** @section  Forms **
 *********************/

/* Form field border color */
@form-border-color: #CCC;
/* Selected form field color */
@form-selected-color: rgba(82, 168, 236, 0.8);

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
ul.as-selections {
    border-color: @form-border-color;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
ul.as-selections.as-selections-focus {
    border-color: @form-selected-color;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @form-selected-color;
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @form-selected-color;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @form-selected-color;
}

/*********************
 ** @section  Well **
 *********************/

/* Well background color */
@well-background-color: #F5F5F5;
/* Well border color */
@well-border-color: #E3E3E3;

.well {
  background-color: @well-background-color;
  border-color: @well-border-color;
}

/*******************************************************
 ** @section  Modal dialogs, dropdowns and clickovers **
 *******************************************************/

/* Background gradient primary color */
@modal-gradient1-color: #FFF;
/* Background gradient secondary color */
@modal-gradient2-color: #F5F5F5;
/* Modal dialog title color */
@modal-title-color: #777;

.modal, .dropdown-menu, .popover {
    .background-gradient-two(@modal-gradient1-color, @modal-gradient2-color, @skipIE: true);
}

.popover.top .arrow:after,
.popover.right .arrow:after,
.popover.bottom .arrow:after,
.popover.left .arrow:after {
    border-bottom-color: @modal-gradient1-color;
}

.modal-header h3, .modal-body h4 {
    color: @modal-title-color;
}

/*****************************
 ** @section  Notifications **
 *****************************/

/* @subsection  Success notification */

/* Success notification text color */
@notification-success-text-color: #666;
/* Success notification border color */
@notification-success-border-color: #CCC;
/* Success notification background color */
@notification-success-background-color: #F5F4F2;

.alert-success, .alert-success h4 {
    color: @notification-success-text-color;
}

.alert-success {
    border-color: @notification-success-border-color;
    background-color: @notification-success-background-color;
}

/* @subsection  Error notification */

/* Error notification text color */
@notification-error-text-color: #B94A48;
/* Error notification border color */
@notification-error-border-color: #EED3D7;
/* Error notification background color */
@notification-error-background-color: #F2DEDE;

.alert-danger, .alert-danger h4,
.alert-error, .alert-error h4 {
    color: @notification-error-text-color;
}

.alert-danger,
.alert-error {
    border-color: @notification-error-border-color;
    background-color: @notification-error-background-color;
}

/* @subsection  Info notification */

/* Info notification text color */
@notification-info-text-color: #3A87AD;
/* Info notification border color */
@notification-info-border-color: #BCE8F1;
/* Info notification background color */
@notification-info-background-color: #D9EDF7;

.alert-info, .alert-info h4 {
    color: @notification-info-text-color;
}

.alert-info {
    border-color: @notification-info-border-color;
    background-color: @notification-info-background-color;
}

/************************************
 ** @section  Left hand navigation **
 ************************************/

/* Left hand navigation item text color */
@lhnav-item-text-color: #999;
/* Left hand navigation item hover text color */
@lhnav-item-text-hover-color: #333;
/* Left hand navigation item selected text color */
@lhnav-item-text-selected-color: #333;
/* Left hand navigation item background color */
@lhnav-item-background-color: transparent;
/* Left hand navigation item hover background color */
@lhnav-item-background-hover-color: transparent;
/* Left hand navigation item selected background color */
@lhnav-item-background-selected-color: transparent;

.nav > li > a,
.nav > li i,
.nav > li.nav-header {
    color: @lhnav-item-text-color;
    background-color: @lhnav-item-background-color;
}

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:hover i,
.nav > li > a:focus i {
    color: @lhnav-item-text-hover-color;
    background-color: @lhnav-item-background-hover-color;
}

.nav > li.active > a,
.nav > li.active > a:hover,
.nav > li.active > a:focus,
.nav > li.active i {
    color: @lhnav-item-text-selected-color;
    background-color: @lhnav-item-background-selected-color;
}

/*********************************
 ** @section  Tabs **
 *********************************/

/* Tab text color */
@tabbed-nav-text-color: #999;
/* Tab text hover color */
@tabbed-nav-text-hover-color: #333;
/* Selected tab text color */
@tabbed-nav-text-selected-color: #333;
/* Tab background color */
@tabbed-nav-background-color: transparent;
/* Tab background hover color */
@tabbed-nav-background-hover-color: transparent;
/* Selected tab background color */
@tabbed-nav-background-selected-color: #FFF;

.nav-tabs > li > a {
    color: @tabbed-nav-text-color;
    background-color: @tabbed-nav-background-color;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: @tabbed-nav-text-hover-color;
    background-color: @tabbed-nav-background-hover-color;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: @tabbed-nav-text-selected-color;
    background-color: @tabbed-nav-background-selected-color;
}

/****************************
 ** @section  Autosuggest **
 ****************************/

/* @subsection  Active item */

/* Active item text color */
@as-item-active-color: #2B3840;
/* Active item border color */
@as-item-active-border-color: #ACC3EC;
/* Active item background gradient primary color */
@as-item-active-gradient1-color: #DDEEFE;
/* Active item background gradient secondary color */
@as-item-active-gradient2-color: #BFE0F1;

/* Active item hover text color */
@as-item-active-hover-color: #2B3840;
/* Active item hover border color */
@as-item-active-hover-border-color: #ACC3EC;
/* Active item hover background gradient primary color */
@as-item-active-hover-gradient1-color: #DDEEFE;
/* Active item hover background gradient secondary color */
@as-item-active-hover-gradient2-color: #BFE0F1;

ul.as-selections li.as-selection-item,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected,
ul.as-selections.as-selections-focus li.as-selection-item.selected {
    .background-gradient-two(@as-item-active-gradient1-color, @as-item-active-gradient2-color);
    color: @as-item-active-color;
    border-color: @as-item-active-border-color;
}

ul.as-selections li.as-selection-item:hover,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected:hover,
ul.as-selections.as-selections-focus li.as-selection-item.selected:hover {
    .background-gradient-two(@as-item-active-hover-gradient1-color, @as-item-active-hover-gradient2-color);
    color: @as-item-active-hover-color;
    border-color: @as-item-active-hover-border-color;
}

ul.as-selections li.as-selection-item a.as-close,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected a.as-close {
    color: @as-item-active-border-color;
}

ul.as-selections li.as-selection-item:hover a.as-close,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected:hover a.as-close {
    color: @as-item-active-hover-border-color;
}

ul.as-selections li.as-selection-item a.as-close:hover,
ul.as-selections li.as-selection-item.as-ghost-item.as-ghost-selected a.as-close:hover {
    color: @as-item-active-hover-color;
}

ul.as-list li.as-result-item.active {
    .background-gradient-two(@as-item-active-gradient1-color, @as-item-active-gradient2-color);
}

/* @subsection  Inactive item */

/* Inactive item text color */
@as-item-blur-color: #666;
/* Inactive item border color */
@as-item-blur-border-color: #BBB;
/* Inactive item background gradient primary color */
@as-item-blur-gradient1-color: #F4F4F4;
/* Inactive item background gradient secondary color */
@as-item-blur-gradient2-color: #D5D5D5;

ul.as-selections li.as-selection-item.blur {
    .background-gradient-two(@as-item-blur-gradient1-color, @as-item-blur-gradient2-color);
    color: @as-item-blur-color;
    border-color: @as-item-blur-border-color;
}

ul.as-selections li.as-selection-item.blur a.as-close {
    color: @as-item-blur-border-color;
}

/* @subsection  Ghost item */

/* Ghost item text color */
@as-item-ghost-color: #666;
/* Ghost item border color */
@as-item-ghost-border-color: #BBB;
/* Ghost item background gradient primary color */
@as-item-ghost-gradient1-color: #FFF;
/* Ghost item background gradient secondary color */
@as-item-ghost-gradient2-color: #FFF;

/* Ghost item hover text color */
@as-item-ghost-hover-color: #666;
/* Ghost item hover border color */
@as-item-ghost-hover-border-color: #BBB;

ul.as-selections li.as-selection-item.as-ghost-item {
    .background-gradient-two(@as-item-ghost-gradient1-color, @as-item-ghost-gradient2-color);
    color: @as-item-ghost-color;
    border-color: @as-item-ghost-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item:hover {
    .background-gradient-two(@as-item-ghost-gradient1-color, @as-item-ghost-gradient2-color);
    color: @as-item-ghost-hover-color;
    border-color: @as-item-ghost-hover-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item a.as-ghost-add i {
    color: @as-item-ghost-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item:hover a.as-ghost-add i {
    color: @as-item-ghost-hover-border-color;
}

ul.as-selections li.as-selection-item.as-ghost-item a.as-ghost-add i:hover {
    color: @as-item-ghost-hover-color;
}

/**************************
 ** @section  Thumbnails **
 **************************/

/* Thumbnail background gradient primary color */
@thumbnail-gradient1-color: #F8F8F6;
/* Thumbnail background gradient secondary color */
@thumbnail-gradient2-color: #E3E2DB;

div.oae-thumbnail {
    .background-gradient-two(@thumbnail-gradient1-color, @thumbnail-gradient2-color, 47%, 74%);
}

/*********************************
 ** @section  Visibility toggle **
 *********************************/

/* Visibility toggle background color */
@visibility-toggle-background-color: #FFF;
/* Visibility toggle selected primary color*/
@visibility-toggle-selected1-color: #9EB7E6;
/* Visibility toggle selected secondary color*/
@visibility-toggle-selected2-color: #DBEDFE;

.oae-large-options-container .oae-large-options {
    background-color: @visibility-toggle-background-color;
}

.oae-large-options-container label .oae-large-options.checked {
    border-color: @visibility-toggle-selected1-color;
    background-color: @visibility-toggle-selected2-color;
}

.oae-large-options-container .oae-large-options.checked + i {
    background-color: @visibility-toggle-selected1-color;
}

.oae-large-options-container .oae-large-options.checked + i:before {
    color: @visibility-toggle-background-color;
}

/*********************
 ** @section  Tiles **
 *********************/

/* Tile banner text color */
@tile-text-color: #FFF;
/* Tile banner background color */
@tile-background-color: rgba(0, 0, 0, 0.8);

.oae-tile > .oae-tile-metadata {
    background-color: @tile-background-color;
}

.oae-tile > .oae-tile-metadata, .oae-tile h3, .oae-tile h3 a {
    color: @tile-text-color;
}

/**************************
 ** @section  List items **
 **************************/

/* List item border color */
@listitem-border-color: #EEEDEB;

.oae-tile,
.oae-listitem,
.oae-list.oae-list-grid > li.oae-list-actions {
    border-color: @listitem-border-color;
}

/**********************
 ** @section  Panels **
 **********************/

/* @subsection  Primary panel */

/* Primary panel text color */
@panel-primary-text-color: #FFF;
/* Primary panel title color */
@panel-primary-title-color: #FFF;
/* Primary panel background color */
@panel-primary-background-color: transparent;

.oae-panel-primary {
    color: @panel-primary-text-color;
    background: @panel-primary-background-color;
}

.oae-panel-primary, .oae-panel-primary:before, .oae-panel-primary:after {
    border-color: @panel-primary-background-color;
}

.oae-panel-primary h1, .oae-panel-primary h2, .oae-panel-primary h3,
.oae-panel-primary h4, .oae-panel-primary h5, .oae-panel-primary h6,
.oae-panel-primary i, .oae-panel-primary i:hover {
    color: @panel-primary-title-color;
}

/* @subsection  Secondary pannel */

/* Secondary panel text color */
@panel-secondary-text-color: #FFF;
/* Secondary panel title color */
@panel-secondary-title-color: #FFF;
/* Secondary panel background color */
@panel-secondary-background-color: transparent;

.oae-panel-secondary {
    color: @panel-secondary-text-color;
    background: @panel-secondary-background-color;
}

.oae-panel-secondary, .oae-panel-secondary:before, .oae-panel-secondary:after {
    border-color: @panel-secondary-background-color;
}

.oae-panel-secondary h1, .oae-panel-secondary h2, .oae-panel-secondary h3,
.oae-panel-secondary h4, .oae-panel-secondary h5, .oae-panel-secondary h6,
.oae-panel-secondary i, .oae-panel-secondary i:hover {
    color: @panel-secondary-title-color;
}

/* @subsection  Tertiary panel */

/* Tertiary panel text color */
@panel-tertiary-text-color: #FFF;
/* Tertiary panel title color */
@panel-tertiary-title-color: #FFF;
/* Tertiary panel background color */
@panel-tertiary-background-color: rgba(255,255,255,0.3);

.oae-panel-tertiary {
    color: @panel-tertiary-text-color;
    background: @panel-tertiary-background-color;
}

.oae-panel-tertiary, .oae-panel-tertiary:before, .oae-panel-tertiary:after {
    border-color: @panel-tertiary-background-color;
}

.oae-panel-tertiary h1, .oae-panel-tertiary h2, .oae-panel-tertiary h3,
.oae-panel-tertiary h4, .oae-panel-tertiary h5, .oae-panel-tertiary h6,
.oae-panel-tertiary i, .oae-panel-tertiary i:hover {
    color: @panel-tertiary-title-color;
}

/*********************
 ** @section  Clips **
 *********************/

/* @subsection  Primary clip */

/* Primary clip text color */
@clip-primary-title-color: #DBDBDB;
/* Primary clip text hover color */
@clip-primary-hover-color: #FFF;
/* Primary clip description color */
@clip-primary-description-color: #999;
/* Primary clip background gradient primary color */
@clip-primary-gradient1-color: #545454;
/* Primary clip background gradient secondary color */
@clip-primary-gradient2-color: #000;

.oae-clip .oae-clip-fold .oae-clip-fold-outer {
    background-color: @clip-primary-gradient1-color;
}

.oae-clip .oae-clip-fold .oae-clip-fold-inner {
    background-color: @clip-primary-gradient2-color;
}

.oae-clip .oae-clip-content {
    .background-gradient-three(@clip-primary-gradient1-color, @clip-primary-gradient1-color, @clip-primary-gradient2-color, 0%, 10%, 100%);
}

.oae-clip .oae-clip-content,
.oae-clip .oae-clip-content > button,
.oae-clip .oae-clip-content ul li button,
.oae-clip .oae-clip-content i {
    color: @clip-primary-title-color;
}

.oae-clip button small {
    color: @clip-primary-description-color;
}

.oae-clip button:hover,
.oae-clip button:focus,
.oae-clip button:hover i,
.oae-clip button:focus i {
    color: @clip-primary-hover-color;
}

.oae-clip ul li button:hover {
    background-color: @clip-primary-gradient2-color;
}

/* @subsection  Secondary clip */

/* Secondary clip text color */
@clip-secondary-title-color: #F5F5F5;
/* Secondary clip text hover color */
@clip-secondary-hover-color: #FFF;
/* Secondary clip description color */
@clip-secondary-description-color: #DBDBDB;
/* Secondary clip background gradient primary color */
@clip-secondary-gradient1-color: #24A7DD;
/* Secondary clip background gradient secondary color */
@clip-secondary-gradient2-color: #0175A9;

.oae-clip.oae-clip-secondary .oae-clip-fold .oae-clip-fold-outer {
    background-color: @clip-secondary-gradient1-color;
}

.oae-clip.oae-clip-secondary .oae-clip-fold .oae-clip-fold-inner {
    background-color: @clip-secondary-gradient2-color;
}

.oae-clip.oae-clip-secondary .oae-clip-content {
    .background-gradient-three(@clip-secondary-gradient1-color, @clip-secondary-gradient1-color, @clip-secondary-gradient2-color, 0%, 10%, 100%);
}

.oae-clip.oae-clip-secondary .oae-clip-content,
.oae-clip.oae-clip-secondary .oae-clip-content button,
.oae-clip.oae-clip-secondary .oae-clip-content i {
    color: @clip-secondary-title-color;
}

.oae-clip.oae-clip-secondary button small {
    color: @clip-secondary-description-color;
}

.oae-clip.oae-clip-secondary button:hover,
.oae-clip.oae-clip-secondary button:focus,
.oae-clip.oae-clip-secondary button:hover i,
.oae-clip.oae-clip-secondary button:focus i {
    color: @clip-secondary-hover-color;
}

.oae-clip.oae-clip-secondary ul li button:hover {
    background-color: @clip-secondary-gradient2-color;
}


Add class to center text and pagination nav

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/Margatroid/Anilytics.git/'