Fix navbar responsive

Fix navbar responsive

//
// Navbar
// --------------------------------------------------

.navbar-fixed-top {
    &.affix {
        .box-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
    }
}

.navbar-brand {
    width: @navbar-brand-width;
    height: @navbar-height;
    padding-top: @navbar-brand-vertical-padding;
    padding-bottom: @navbar-brand-vertical-padding;

    span,
    a {
        font-size: @navbar-brand-font-size;
    }

    .navbar-brand-logo,
    .navbar-brand-badge {
        height: @navbar-brand-img-height;
    }

    .navbar-brand-badge {
        display: none;
    }
}

.navbar-toggle {
    color: @navbar-default-toggle-icon-bar-bg;
    font-size: @navbar-default-toggle-font-size;
    padding: @navbar-default-toggle-padding;
    margin-top: @navbar-default-toggle-margin-top;
    margin-bottom: @navbar-default-toggle-margin-bottom;
}

.fa-navbar-toggle:before {
    content: @navbar-default-toggle-fa-icon;
}

.navbar-inverse .navbar-toggle {
    color: @navbar-inverse-toggle-icon-bar-bg;
}

.navbar-nav {
    > .dropdown > a {
        color: @navbar-dropdown-link-color;

        &:hover,
        &:focus {
            color: @navbar-dropdown-link-hover-color;
            background-color: @navbar-dropdown-link-hover-bg;
        }
    }
}

.navbar-inverse.navbar-fixed-top {
    &.affix {
        .box-shadow(0 3px 4px rgba(0, 0, 0, 0.32));
    }
}

// Navbar Responsive
// --------------------------------------------------
@media (max-width: @grid-float-breakpoint-max) {
    .navbar-brand.navbar-brand-swipe {
        width: auto;

        img.navbar-brand-logo {
            display: none;
        }

        img.navbar-brand-badge {
            display: inherit;
        }
    }

    .navbar-fixed-top {
        &.affix-top {
            > .navbar-collapse {
                .box-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
            }
        }
    }

    .navbar-collapse {
        .dropdown-header {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .dropdown-menu {
            > li.dropdown {
                > a:after {
                    display: none;
                }

                > a > .caret {
                    display: inline-block;
                }
            }

            &.dropdown-menu-left,
            &.dropdown-menu-right {
                float: none !important;
            }

            > li > a,
            li > a,
            .dropdown-header {
                font-size: @font-size-base;
            }
        }

        .dropdown-menu,
        .open .dropdown-menu {
            padding-left: 15px;

            > li > a,
            li > a,
            .dropdown-header {
                padding-left: 15px;
            }
        }

        .open .dropdown-menu,
        .dropdown-menu {
            display: block;
            width: 100%;
            position: relative;
            float: none;
            margin-top: 0;
            background-color: inherit;
            border: 0;
            box-shadow: none;

            > li > a {
                line-height: @line-height-computed;

                &:hover,
                &:focus {
                    background-image: none;
                }
            }

            .dropdown-menu {
                display: block;
            }
        }

        .col-menu-2 {
            min-width: inherit;

            > li:first-child ul {
                border-right-color: transparent;
            }
        }

        .navbar-brand {
            width: auto;
        }
    }

    .navbar-default .navbar-collapse {
        .dropdown-menu,
        .open .dropdown-menu {
            > li > a,
            > li.active > a,
            .dropdown > a,
            .dropdown.open > a,
            &.col-menu-2 > li > ul > li a {
                color: @navbar-default-collapse-dropdown-link-color;
                background-color: @navbar-default-collapse-dropdown-link-bg;

                &:hover,
                &:focus {
                    color: @navbar-default-collapse-dropdown-link-hover-color;
                    background-color: @navbar-default-collapse-dropdown-link-hover-bg;
                }
            }
        }

        > li > a,
        .dropdown > a,
        .dropdown.open > a,
        .dropdown-header {
            color: @navbar-default-collapse-link-color !important;
            background-color: @navbar-default-collapse-link-bg;

            &:hover,
            &:focus {
                color: @navbar-default-collapse-link-hover-color !important;
                background-color: @navbar-default-collapse-link-hover-bg;
            }
        }

        > li.active > a {
            color: @navbar-default-collapse-link-color !important;

            &:hover,
            &:focus {
                color: @navbar-default-collapse-link-hover-color !important;
            }
        }
    }

    .navbar-inverse .navbar-collapse {
        .dropdown-menu,
        .open .dropdown-menu {
            > li > a,
            > li.active > a,
            .dropdown > a,
            .dropdown.open > a,
            &.col-menu-2 > li > ul > li a {
                color: @navbar-inverse-collapse-dropdown-link-color;
                background-color: @navbar-inverse-collapse-dropdown-link-bg;

                &:hover,
                &:focus {
                    color: @navbar-inverse-collapse-dropdown-link-hover-color;
                    background-color: @navbar-inverse-collapse-dropdown-link-hover-bg;
                }
            }
        }

        > li > a,
        .dropdown > a,
        .dropdown.open > a,
        .dropdown-header {
            color: @navbar-inverse-collapse-link-color !important;
            background-color: @navbar-inverse-collapse-link-bg;

            &:hover,
            &:focus {
                color: @navbar-inverse-collapse-link-hover-color !important;
                background-color: @navbar-inverse-collapse-link-hover-bg;
            }
        }

        > li.active > a {
            color: @navbar-inverse-collapse-link-color !important;

            &:hover,
            &:focus {
                color: @navbar-inverse-collapse-link-hover-color !important;
            }
        }
    }

    .navbar-inverse.navbar-fixed-top {
        &.affix-top {
            > .navbar-collapse {
                .box-shadow(0 3px 4px rgba(0, 0, 0, 0.32));
            }
        }
    }
}

@media (orientation: landscape) {
    .navbar-collapse {
        max-height: 230px;
    }
}

//
// Navbar
// --------------------------------------------------

.navbar-fixed-top {
    &.affix {
        .box-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
    }
}

.navbar-brand {
    width: @navbar-brand-width;
    height: @navbar-height;
    padding-top: @navbar-brand-vertical-padding;
    padding-bottom: @navbar-brand-vertical-padding;

    span,
    a {
        font-size: @navbar-brand-font-size;
    }

    .navbar-brand-logo,
    .navbar-brand-badge {
        height: @navbar-brand-img-height;
    }

    .navbar-brand-badge {
        display: none;
    }
}

.navbar-toggle {
    color: @navbar-default-toggle-icon-bar-bg;
    font-size: @navbar-default-toggle-font-size;
    padding: @navbar-default-toggle-padding;
    margin-top: @navbar-default-toggle-margin-top;
    margin-bottom: @navbar-default-toggle-margin-bottom;
}

.fa-navbar-toggle:before {
    content: @navbar-default-toggle-fa-icon;
}

.navbar-inverse .navbar-toggle {
    color: @navbar-inverse-toggle-icon-bar-bg;
}

.navbar-nav {
    > .dropdown > a {
        color: @navbar-dropdown-link-color;

        &:hover,
        &:focus {
            color: @navbar-dropdown-link-hover-color;
            background-color: @navbar-dropdown-link-hover-bg;
        }
    }
}

.navbar-inverse.navbar-fixed-top {
    &.affix {
        .box-shadow(0 3px 4px rgba(0, 0, 0, 0.32));
    }
}

// Navbar Responsive
// --------------------------------------------------
@media (max-width: @grid-float-breakpoint-max) {
    .navbar-brand.navbar-brand-swipe {
        width: auto;

        img.navbar-brand-logo {
            display: none;
        }

        img.navbar-brand-badge {
            display: inherit;
        }
    }

    .navbar-fixed-top {
        &.affix-top {
            > .navbar-collapse {
                .box-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
            }
        }
    }

    .navbar-nav {
        .dropdown-header {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .dropdown-menu {
            > li.dropdown {
                > a:after {
                    display: none;
                }

                > a > .caret {
                    display: inline-block;
                }
            }

            &.dropdown-menu-left,
            &.dropdown-menu-right {
                float: none !important;
            }

            > li > a,
            li > a,
            .dropdown-header {
                font-size: @font-size-base;
            }
        }

        .dropdown-menu,
        .open .dropdown-menu {
            padding-left: 15px;

            > li > a,
            li > a,
            .dropdown-header {
                padding-left: 15px;
            }
        }

        .open .dropdown-menu,
        .dropdown-menu {
            display: block;
            width: 100%;
            position: relative;
            float: none;
            margin-top: 0;
            background-color: inherit;
            border: 0;
            box-shadow: none;

            > li > a {
                line-height: @line-height-computed;

                &:hover,
                &:focus {
                    background-image: none;
                }
            }

            .dropdown-menu {
                display: block;
            }
        }

        .col-menu-2 {
            min-width: inherit;

            > li:first-child ul {
                border-right-color: transparent;
            }
        }

        .navbar-brand {
            width: auto;
        }
    }

    .navbar-default .navbar-nav {
        .dropdown-menu,
        .open .dropdown-menu {
            > li > a,
            > li.active > a,
            .dropdown > a,
            .dropdown.open > a,
            &.col-menu-2 > li > ul > li a {
                color: @navbar-default-collapse-dropdown-link-color;
                background-color: @navbar-default-collapse-dropdown-link-bg;

                &:hover,
                &:focus {
                    color: @navbar-default-collapse-dropdown-link-hover-color;
                    background-color: @navbar-default-collapse-dropdown-link-hover-bg;
                }
            }
        }

        > li > a,
        .dropdown > a,
        .dropdown.open > a,
        .dropdown-header {
            color: @navbar-default-collapse-link-color !important;
            background-color: @navbar-default-collapse-link-bg;

            &:hover,
            &:focus {
                color: @navbar-default-collapse-link-hover-color !important;
                background-color: @navbar-default-collapse-link-hover-bg;
            }
        }

        > li.active > a {
            color: @navbar-default-collapse-link-color !important;

            &:hover,
            &:focus {
                color: @navbar-default-collapse-link-hover-color !important;
            }
        }
    }

    .navbar-inverse .navbar-nav {
        .dropdown-menu,
        .open .dropdown-menu {
            > li > a,
            > li.active > a,
            .dropdown > a,
            .dropdown.open > a,
            &.col-menu-2 > li > ul > li a {
                color: @navbar-inverse-collapse-dropdown-link-color;
                background-color: @navbar-inverse-collapse-dropdown-link-bg;

                &:hover,
                &:focus {
                    color: @navbar-inverse-collapse-dropdown-link-hover-color;
                    background-color: @navbar-inverse-collapse-dropdown-link-hover-bg;
                }
            }
        }

        > li > a,
        .dropdown > a,
        .dropdown.open > a,
        .dropdown-header {
            color: @navbar-inverse-collapse-link-color !important;
            background-color: @navbar-inverse-collapse-link-bg;

            &:hover,
            &:focus {
                color: @navbar-inverse-collapse-link-hover-color !important;
                background-color: @navbar-inverse-collapse-link-hover-bg;
            }
        }

        > li.active > a {
            color: @navbar-inverse-collapse-link-color !important;

            &:hover,
            &:focus {
                color: @navbar-inverse-collapse-link-hover-color !important;
            }
        }
    }

    .navbar-inverse.navbar-fixed-top {
        &.affix-top {
            > .navbar-collapse {
                .box-shadow(0 3px 4px rgba(0, 0, 0, 0.32));
            }
        }
    }
}

@media (orientation: landscape) {
    .navbar-collapse {
        max-height: 230px;
    }
}


Usage is always after section indicator, typo: Usign: -> Use:

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/pointofpresence/lesshat.git/'


fixed background positions

fixed background positions

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


[MEET-211] - Allow room name text area to display all the characters

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/ulamnet/hublin.git/'


Fixed card alignment in mobile

Fixed card alignment in mobile

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/cwparsons/cwparsonsca.git/'


Add layout.less for mobile; add layout.less to CM mobile

error: pathspec 'project/layout/CM/mobile/css/layout.less' did not match any file(s) known to git


Dashboard update

Dashboard update

.dashboard {
  position: relative;

  .btn-a {
    position: fixed;
    top: 70px;
    right: 108px;
  }
}

error: pathspec 'client/stylesheets/sections/dashboard/base.import.less' did not match any file(s) known to git


Tweak top menu width and padding

Tweak top menu width and padding

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/Quinten/supernapietheme.git/'


Create creative.less

Create creative.less

@import "variables.less";
@import "mixins.less";

// Global Components
html,
body {
    height: 100%;
    width: 100%;
}

body {
    .serif-font;
}

hr {
    border-color: @theme-primary;
    border-width: 3px;
    max-width: 50px;
}

hr.light {
    border-color: white;
}

a {
    .transition-all;
    color: @theme-primary;
    &:hover,
    &:focus {
        color: darken(@theme-primary, 10%);
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    .sans-serif-font;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.bg-primary {
    background-color: @theme-primary;
}

.bg-dark {
    background-color: @gray-darker;
    color: white;
}

.text-faded {
    color: fade(white, 70%);
}

section {
    padding: 100px 0;
}

aside {
    padding: 50px 0;
}

.no-padding {
    padding: 0;
}

// Navigation

.navbar-default {
    background-color: white;
    border-color: fade(@gray-darker, 5%);
    .sans-serif-font;
    .transition-all;
    .navbar-header .navbar-brand {
        color: @theme-primary;
        .sans-serif-font;
        font-weight: 700;
        text-transform: uppercase;
        &:hover,
        &:focus {
            color: darken(@theme-primary, 10%);
        }
    }
    .navbar-header .navbar-toggle {
        font-weight: 700;
        font-size: 12px;
        color: @gray-darker;
        text-transform: uppercase;
    }
    .nav {
        > li {
            > a,
            > a:focus {
                text-transform: uppercase;
                font-weight: 700;
                font-size: 13px;
                color: @gray-darker;
                &:hover {
                    color: @theme-primary;
                }
            }
            &.active {
                > a,
                > a:focus {
                    color: @theme-primary !important;
                    background-color: transparent;
                    &:hover {
                        background-color: transparent;
                    }
                }
            }
        }
    }
    @media (min-width: 768px) {
        background-color: transparent;
        border-color: fade(white, 30%);
        .navbar-header .navbar-brand {
            color: fade(white, 70%);
            &:hover,
            &:focus {
                color: white;
            }
        }
        .nav > li > a,
        .nav > li > a:focus {
            color: fade(white, 70%);
            &:hover {
                color: white;
            }
        }
        &.affix {
            background-color: white;
            border-color: fade(@gray-darker, 5%);
            .navbar-header .navbar-brand {
                color: @theme-primary;
                font-size: 14px;
                &:hover,
                &:focus {
                    color: darken(@theme-primary, 10%);
                }
            }
            .nav > li > a,
            .nav > li > a:focus {
                color: @gray-darker;
                &:hover {
                    color: @theme-primary;
                }
            }
        }
    }
}

// Homepage Header

header {
    position: relative;
    width: 100%;
    min-height: auto;
    .background-cover;
    background-position: center;
    background-image: url('../img/header.jpg');
    text-align: center;
    color: white;
    .header-content {
        position: relative;
        text-align: center;
        padding: 100px 15px 100px;
        width: 100%;
        .header-content-inner {
            h1 {
                font-weight: 700;
                text-transform: uppercase;
                margin-top: 0;
                margin-bottom: 0;
                font-size: 30px;
            }
            hr {
                margin: 30px auto;
            }
            p {
                font-weight: 300;
                color: fade(white, 70%);
                font-size: 16px;
                margin-bottom: 50px;
            }
        }
    }
    @media (min-width: 768px) {
        min-height: 100%;
        .header-content {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            padding: 0 50px;
            .header-content-inner {
                max-width: 1000px;
                margin-left: auto;
                margin-right: auto;
                h1 {
                    font-size: 50px;
                }
                p {
                    font-size: 18px;
                    max-width: 80%;
                    margin-left: auto;
                    margin-right: auto;
                }
            }
        }
    }
}

// Sections

.section-heading {
    margin-top: 0;
}

.service-box {
    max-width: 400px;
    margin: 50px auto 0;
    @media (min-width: 992px) {
        margin: 20px auto 0;
    }
    p {
        margin-bottom: 0;
    }
}

.portfolio-box {
    position: relative;
    display: block;
    max-width: 650px;
    margin: 0 auto;
    .portfolio-box-caption {
        color: white;
        opacity: 0;
        display: block;
        background: fade(@theme-primary, 90%);
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        height: 100%;
        .transition-all;
        .portfolio-box-caption-content {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            .project-category,
            .project-name {
                .sans-serif-font;
                padding: 0 15px;
            }
            .project-category {
                text-transform: uppercase;
                font-weight: 600;
                font-size: 14px;
            }
            .project-name {
                font-size: 18px;
            }
        }
    }
    &:hover {
        .portfolio-box-caption {
            opacity: 1;
        }
    }
    &:focus {
        outline: none;
    }
    @media (min-width: 768px) {
        .portfolio-box-caption {
            .portfolio-box-caption-content {
                .project-category {
                    font-size: 16px;
                }
                .project-name {
                    font-size: 22px;
                }
            }
        }
    }
}

.call-to-action {
    h2 {
        margin: 0 auto 20px;
    }
}

// Bootstrap Overrides
.text-primary {
    color: @theme-primary;
}

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

// Button Styles
.btn-default {
    .button-variant(@gray-darker;white;white);
}

.btn-primary {
    .button-variant(white;@theme-primary;@theme-primary);
}

.btn {
    .sans-serif-font;
    border: none;
    border-radius: 300px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-xl {
    padding: 15px 30px;
}

// Extras
// -- Highlight Color Customization
::-moz-selection {
    color: white;
    text-shadow: none;
    background: @gray-darker;
}

::selection {
    color: white;
    text-shadow: none;
    background: @gray-darker;
}

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

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

body {
    webkit-tap-highlight-color: @gray-darker;
}

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


Create nk-forms.less

Create nk-forms.less

div.required label.control-label:after {
  position: absolute;
  content: '*';
  color: @brand-danger;
  right: 0px;
  top: (@padding-base-vertical + 1);
}

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


Imported colors, vendor and utilities

Imported colors, vendor and utilities

@import "colors";
@import "vendor";
@import "utilities";

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


Components: added 'flash-message'

Components: added 'flash-message'

@typro-flash-message-default: #aaa;
@typro-flash-message-info: #6aaebd;
@typro-flash-message-success: #61ab63;
@typro-flash-message-error: #b35d5d;
@typro-flash-message-warning: #cead52;

.flash-message {
	padding: 0.5em 1em;
	border-radius: 3px;
	margin-bottom: 1em;
	background-color: @typro-flash-message-default;
	color: #fff;
}

.flash-message--info {
	background-color: @typro-flash-message-info;
}

.flash-message--success {
	background-color: @typro-flash-message-success;
}

.flash-message--error {
	background-color: @typro-flash-message-error;
}

.flash-message--warning {
	background-color: @typro-flash-message-warning;
}

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


changed the color of .tag.link modifier

changed the color of .tag.link modifier

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


Create creative.less

Create creative.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/jwspitznagel/jwspitznagel.github.io.git/'


Floating FRBR link right.

Floating FRBR link right.

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/Det-Kongelige-Bibliotek/rex.git/'


add/edit mediatype thumbnails

add/edit mediatype thumbnails


fix background color to white. fixes full screen in firefox

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


added transform without vendor prefix. Didn't work in Chromium 52.x anymore.

//@import "bootstrap/bootstrap.less";
@import "bootstrap/buttons.less";
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "variables.less";
@import "mixins.less";

// Body
body {
  //padding-top: 60px;
}

// Navigation bar
.navbar-inner-text (@base, @text-color) {
  text-shadow: 0 1px 0 contrast(@base, lighten(@base, 15%), darken(@base, 15%));
  color: @text-color;
  @caret-color: average(@base, @text-color);
  @caret-hover-color: average(@caret-color, @text-color);

  .caret {
    border-bottom-color: @caret-color;
    border-top-color: @caret-color;
  }

  &:hover .caret, &:focus .caret {
    border-bottom-color: @caret-hover-color;
    border-top-color: @caret-hover-color;
  }
}

.brand (@color, @dark, @light) when (@color = @dark) {
  span {
    background-image: url(../img/tentacle-20x20.png);

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: url(../img/tentacle-20x20@2x.png);
    }
  }
}
.brand (@color, @dark, @light) when (@color = @light) {
  span {
    background-image: url(../img/tentacle-20x20-light.png);

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: url(../img/tentacle-20x20-light@2x.png);
    }
  }
}

.nowrap {
  white-space: nowrap;
}

.actioncol {
  text-align: center;
  .nowrap;

  a {
    text-decoration: none;
    color: #000;

    &.disabled {
      color: #ccc;
      cursor: default;
    }
  }
}

.navbar-background-color (@top, @bottom, @image) when (isstring(@image)) {
  #imggradient > .vertical(@top, @bottom, @image);
}

.navbar-background-color(@top, @bottom, @image) when not (isstring(@image)) {
  #gradient > .vertical(@top, @bottom);
}

.navbar-inner-color (@base, @gradientalpha: 100%, @image: false) {
  @top: lighten(@base, 25%);
  @bottom: darken(@base, 15%);

  @text-color-light: #f2f2f2;
  @text-color-dark: #333333;
  @text-color: contrast(@bottom, @text-color-dark, @text-color-light);

  .navbar-background-color(fade(@top, @gradientalpha), fade(@bottom, @gradientalpha), @image);

  .brand, .nav>li>a {
    .navbar-inner-text(@base, @text-color);
  }

  .brand {
    .brand(@text-color, @text-color-dark, @text-color-light);
  }

  .nav {
    li.dropdown.open>.dropdown-toggle, li.dropdown.active>.dropdown-toggle, li.dropdown.open.active>.dropdown-toggle {
      // invert for dropdown
      .navbar-background-color(fade(@bottom, @gradientalpha), fade(@top, @gradientalpha), @image);
    }
  }
}

#navbar .navbar-inner {
  @base: #F2F2F2;
  .navbar-inner-color(@base);

  &.transparent {
    .navbar-inner-color(@base, 60%, "../img/trans-background.png");
  }

  &.red {
    @base: #bd362f;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.orange {
    @base: #F27728;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.yellow {
    @base: #F2DE28;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.green {
    @base: #77FF28;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.blue {
    @base: #04c;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.violet {
    @base: #7728FF;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.black {
    @base: #383838;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.white {
    @base: #eeeeee;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }

  .brand span {
    background-size: 20px 20px;
    background-position: left center;
    padding-left: 24px;
    background-repeat: no-repeat;
  }
}

.octoprint-container {
  margin-top: 20px;

  /** OctoPrint application tabs */

  .tab-content {
    padding: 9px 15px;
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;

    @radius: 4px;
    .border-bottom-right-radius(@radius);
    .border-bottom-left-radius(@radius);
  }

  .nav {
    margin-bottom: 0px;
  }

  .tab-content h1 {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333;
    border: 0;
    border-bottom: 1px solid #E5E5E5;
    font-weight: normal;
  }

  /** Accordions */

  .accordion-heading {
    .accordion-heading-button {
      float: right;

      a {
        display: inline-block;
        padding: 8px 15px;
        font-size: 14px;
        line-height: 20px;
        color: #000;
        text-decoration: none;
        background: none;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }
    }

    a.accordion-toggle {
      display: inline-block;
    }

    [class^="icon-"],
    [class*=" icon-"] {
      color: #000;
    }
  }
}

.print-control .btn {
  padding-left: 4px;
  padding-right: 4px;
}

.upload-buttons .btn {
  margin-right: 0;
}

/** Tables */

table {
  table-layout: fixed;

  .popover-title {
    text-overflow: ellipsis;
    word-break: break-all;
  }

  th, td {
    overflow: hidden;

    // gcode files
    &.gcode_files_name {
      text-overflow: ellipsis;
      text-align: left;
      .nowrap;
    }

    &.gcode_files_action {
      width: 90px;
      .actioncol;
    }

    // timelapse files
    &.timelapse_files_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.timelapse_files_size {
      text-align: right;
      width: 55px;
    }

    &.timelapse_files_action {
      width: 45px;
      .actioncol;
    }

    // user settings
    &.settings_users_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.settings_users_active, &.settings_users_admin {
      text-align: center;
      width: 55px;
    }

    &.settings_users_actions {
      width: 60px;
      .actioncol;
    }

    // log files
    &.settings_logs_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.settings_logs_size {
      text-align: right;
      width: 70px;
    }

    &.settings_logs_date {
      text-align: left;
      width: 130px;
    }

    &.settings_logs_action {
      width: 70px;
      .actioncol;
    }

    // Printer profiles
    &.settings_printerProfiles_profiles_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.settings_printerProfiles_profiles_model {
      text-align: left;
      width: 250px;
    }

    &.settings_printerProfiles_profiles_action {
      width: 80px;
      .actioncol;
    }

  }
}

/** Temperature tab */

#temperature-graph {
  height: 350px;
  width: 100%;
  background-image: url("../img/graph-background.png");
  background-position: center;
  background-repeat: no-repeat;
}

.tab-content, .tab-pane {
  overflow: visible;
}

.tempInput {
  width: 50px;
}

#temp_newTemp, #temp_newBedTemp, #speed_innerWall, #speed_outerWall, #speed_fill, #speed_support,
#webcam_timelapse_interval, #webcam_timelapse_postRoll, #webcam_timelapse_fps {
  text-align: right;
}

ul.dropdown-menu li a {
  cursor: pointer;
}

/** Connection settings */

#connection_ports, #connection_baudrates, #connection_printers {
  width: 100%;
}

/** Offline & Reload overlay */

#offline_overlay,
#reloadui_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  display: none;
}

#offline_overlay_background,
#reloadui_overlay_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

#offline_overlay_wrapper,
#reloadui_overlay_wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 60px;

  .container {
    margin: auto;
  }
}

/** Webcam */

#webcam_container {
  width: 100%;
  position: relative;
  outline: none;

  //min-height: 440px;

  .flipH {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  .flipV {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
  }

  .flipH.flipV {
    -webkit-transform: scaleX(-1) scaleY(-1);
    -moz-transform: scaleX(-1) scaleY(-1);
    -ms-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
}

  .rotate90 {
    transform: rotate(-90deg);
  }

  .keycontrol_overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 85%;
    color: white;
    padding: 0;

    kbd {
      border: 1px solid #eeeeee;
      border-radius: 3px;
      margin-left: 2px;
      margin-right: 2px;
      font-size: 90%;
      padding: 2px;
      min-width: 1em;
    }

    .keycontrol_overlay_heading {
      position: relative;
      padding: 10px;
      font-weight: bold;
    }

    .keycontrol_overlay_column {
      position: relative;
      width: 45%;
      padding: 10px;
      float: left;
    }
  }
}

/** GCODE file manager */

#files {
  .gcode_files {
    @padding: 5px;
    @scrollBar: 5px;
    @line-height: 20px;

    padding-right: @scrollBar + 2px;

    .entry {
      padding: @padding;
      line-height: @line-height;
      border-bottom: 1px solid #ddd;
      position: relative;

      &:hover {
        background-color: #f5f5f5;
      }

      .title {
        text-overflow: ellipsis;
        word-break: break-all;
      }

      .uploaded, .size, .additionalInfo {
        font-size: 85%;
        color: #999;
      }

      .action-buttons {
        position: absolute;
        bottom: @padding;
        right: @padding;
      }

      .additionalInfo {
        padding-bottom: @line-height + 2px;
      }
    }
  }

  .upload-buttons {
    margin-top: 10px;
  }

  .form-search {
    text-align: center;
    margin-bottom: 5px !important;
  }
}

/** Control tab */

#control {
  overflow: hidden;

  .jog-panel {
    float: left;
    margin-right: 19px;
  }

  h1 {
    text-align: left;
  }

  .jog-panel {
    >div {
      text-align: center;
    }

    >div.distance {
      text-align: left;
    }

    .slider {
      margin-bottom: 10px;
    }
  }

  .box {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
  }

  .control-box {
    display: block;
    height: 30px;
    margin-bottom: 10px;
  }

  .btn-group {
    margin-bottom: 10px;
  }

  .btn-group.distance > .btn {
    width: 43px;
    padding: 3px 0;
    height: 30px;
  }

  .slider-handle {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -3px;
  }

  .custom_section {
    h1 {
      cursor: pointer;
    }
  }

  .custom_section_horizontal .custom_control {
    display: inline-block;
  }

  .custom_section_vertical .custom_control {
      display:block;
  }

  .custom_control {
    .slider {
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 2px;
    }
  }
}

/** GCODE viewer */

#gcode {
  .progress {
    width: 582px;

    .bar {
      .transition(width 0s linear);
    }
  }

  .canvas_container {
    position: relative;
  }

  #gcode_layer_slider {
    position: absolute;
    right: 0;
    top: 0;
    height: 568px;
    float: right;

    .slider-handle {
      width: 14px;
      height: 14px;
      margin-left: -3px;
      margin-top: -7px;
    }
  }

  #gcode_command_slider {
    .slider-handle {
      width: 14px;
      height: 14px;
      margin-left: -7px;
      margin-top: -3px;
    }
  }
}

/** Terminal output */

#term {
  .terminal {
    #terminal-output {
      min-height: 340px;
      margin-bottom: 5px;
    }

    margin-bottom: 30px;
  }

  #terminal-sendpanel {
    text-align: right;
  }
}

/** Settings dialog */
#settings_dialog {
  .modal-body {
    #settings_dialog_menu {
      margin-left: 0;
    }
  }
}

#settings_appearance_managelanguagesdialog_emptylist {
  overflow: hidden;
  width: 100%;
  height: 300px;
  text-align: center;
  display: table;

  div {
    display: table-cell;
    vertical-align: middle;
  }
}

/** Footer */
.footer {
  ul {
    margin: 0;

    li {
      &:first-child {
        margin-left: 0;
      }

      display: inline;
      margin-left: 1em;
      font-size: 85%;
      a {
        color: #555;
      }
    }

  }
}

/** Notifications */

.ui-pnotify .alert a {
  color: #c09853;
}
.ui-pnotify .alert-error a,
.ui-pnotify .alert-danger a {
  color: #b94a48;
}
.ui-pnotify .alert-success a {
  color: #468847;
}
.ui-pnotify .alert-info a {
  color: #3a87ad;
}

.pnotify_additional_info {
  .pnotify_more {
    font-size: 85%;
  }
}

/** General helper classes */

.text-right {
  text-align: right;
}

.overflow_visible {
  overflow: visible !important;
}

.border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.hidden {
  display: none;
}

textarea.block {
  .border_box;
  width: 100%;
}

#drop_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;

  &.in {
    display: block;
  }

  #drop_overlay_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  }

  #drop_overlay_wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 60px;

    @dropzone_width: 50%;
    @dropzone_height: 100%;
    @border_color: #cccccc;

    #drop, #drop_background {
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 0;
      width: 100%;
    }

    #drop_locally, #drop_locally_background {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -50%;
      width: 50%;
      border-right: 2px dashed @border_color;
    }

    #drop_sd, #drop_sd_background {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: 0;
      width: 50%;
      border-left: 2px dashed @border_color;
    }

    .dropzone {
      height: @dropzone_height;
      z-index: 10001;

      color: #ffffff;
      font-size: 30px;

      i {
        font-size: 50px;
      }

      .text {
        display: block;
        text-align: center;
        line-height: 40px;
        position: absolute;
        width: 100%;
        bottom: 5%;

        filter:alpha(opacity=100);
        -moz-opacity:1.0;
        -khtml-opacity: 1.0;
        opacity: 1.0;
      }
    }

    .dropzone_background {
      width: @dropzone_width;
      height: @dropzone_height;

      background-color: #000000;
      filter:alpha(opacity=25);
      -moz-opacity:0.25;
      -khtml-opacity: 0.25;
      opacity: 0.25;

      &.hover {
        background-color: #000000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;

      }

      &.fade {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        opacity: 1;
      }
    }
  }
}

.icon-sd-black-14 {
  background: url("../img/icon-sd-black-14.png") 0 3px no-repeat;
  width: 11px;
  height: 17px;
  display: inline-block !important;
}

.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/** Styles for Bootstrap Slider */

.slider {
  .slider-selection {
    .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
  }

  &.slider-disabled .slider-selection {
    background-image: none;
    .opacity(65);
    .box-shadow(none);
  }

  .slider-track {
    background-color: @wellBackground;
    border: 1px solid darken(@wellBackground, 7%);
    .border-radius(@baseBorderRadius);
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  }

  &.slider-disabled .slider-track {
    background-image: none;
    .opacity(65);
    .box-shadow(none);
  }

  .slider-handle {
    .btn;
    padding: 0;
    margin-bottom: 0;
    .opacity(100);

    &.hide {
      display: none;
    }

    &.round {
      .border-radius(50%);
    }
  }
}

.modal.large {
  width: 975px;
  margin-left: -487px;
}

.full-sized-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;

  padding: 15px;

  .row-fluid {
    height: 100%;
  }

  @media (max-width: 979px) {
    position: static;
  }
}

.scrollable {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.input-append, .input-prepend {
  .add-on {
    &.add-on-limited {
      overflow-x: hidden;
      text-overflow: ellipsis;
      width: inherit;
    }
  }
}

.control-group.error .input-prepend .fileinput-button,
.control-group.error .input-append .fileinput-button {
  border-color: #b94a48;
}

input[type=number] {
  text-align: right;
}

//@import "bootstrap/bootstrap.less";
@import "bootstrap/buttons.less";
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "variables.less";
@import "mixins.less";

// Body
body {
  //padding-top: 60px;
}

// Navigation bar
.navbar-inner-text (@base, @text-color) {
  text-shadow: 0 1px 0 contrast(@base, lighten(@base, 15%), darken(@base, 15%));
  color: @text-color;
  @caret-color: average(@base, @text-color);
  @caret-hover-color: average(@caret-color, @text-color);

  .caret {
    border-bottom-color: @caret-color;
    border-top-color: @caret-color;
  }

  &:hover .caret, &:focus .caret {
    border-bottom-color: @caret-hover-color;
    border-top-color: @caret-hover-color;
  }
}

.brand (@color, @dark, @light) when (@color = @dark) {
  span {
    background-image: url(../img/tentacle-20x20.png);

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: url(../img/tentacle-20x20@2x.png);
    }
  }
}
.brand (@color, @dark, @light) when (@color = @light) {
  span {
    background-image: url(../img/tentacle-20x20-light.png);

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: url(../img/tentacle-20x20-light@2x.png);
    }
  }
}

.nowrap {
  white-space: nowrap;
}

.actioncol {
  text-align: center;
  .nowrap;

  a {
    text-decoration: none;
    color: #000;

    &.disabled {
      color: #ccc;
      cursor: default;
    }
  }
}

.navbar-background-color (@top, @bottom, @image) when (isstring(@image)) {
  #imggradient > .vertical(@top, @bottom, @image);
}

.navbar-background-color(@top, @bottom, @image) when not (isstring(@image)) {
  #gradient > .vertical(@top, @bottom);
}

.navbar-inner-color (@base, @gradientalpha: 100%, @image: false) {
  @top: lighten(@base, 25%);
  @bottom: darken(@base, 15%);

  @text-color-light: #f2f2f2;
  @text-color-dark: #333333;
  @text-color: contrast(@bottom, @text-color-dark, @text-color-light);

  .navbar-background-color(fade(@top, @gradientalpha), fade(@bottom, @gradientalpha), @image);

  .brand, .nav>li>a {
    .navbar-inner-text(@base, @text-color);
  }

  .brand {
    .brand(@text-color, @text-color-dark, @text-color-light);
  }

  .nav {
    li.dropdown.open>.dropdown-toggle, li.dropdown.active>.dropdown-toggle, li.dropdown.open.active>.dropdown-toggle {
      // invert for dropdown
      .navbar-background-color(fade(@bottom, @gradientalpha), fade(@top, @gradientalpha), @image);
    }
  }
}

#navbar .navbar-inner {
  @base: #F2F2F2;
  .navbar-inner-color(@base);

  &.transparent {
    .navbar-inner-color(@base, 60%, "../img/trans-background.png");
  }

  &.red {
    @base: #bd362f;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.orange {
    @base: #F27728;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.yellow {
    @base: #F2DE28;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.green {
    @base: #77FF28;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.blue {
    @base: #04c;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.violet {
    @base: #7728FF;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.black {
    @base: #383838;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }
  &.white {
    @base: #eeeeee;
    .navbar-inner-color(@base);

    &.transparent {
      .navbar-inner-color(@base, 60%, "../img/trans-background.png");
    }
  }

  .brand span {
    background-size: 20px 20px;
    background-position: left center;
    padding-left: 24px;
    background-repeat: no-repeat;
  }
}

.octoprint-container {
  margin-top: 20px;

  /** OctoPrint application tabs */

  .tab-content {
    padding: 9px 15px;
    border-left: 1px solid #DDD;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;

    @radius: 4px;
    .border-bottom-right-radius(@radius);
    .border-bottom-left-radius(@radius);
  }

  .nav {
    margin-bottom: 0px;
  }

  .tab-content h1 {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    color: #333;
    border: 0;
    border-bottom: 1px solid #E5E5E5;
    font-weight: normal;
  }

  /** Accordions */

  .accordion-heading {
    .accordion-heading-button {
      float: right;

      a {
        display: inline-block;
        padding: 8px 15px;
        font-size: 14px;
        line-height: 20px;
        color: #000;
        text-decoration: none;
        background: none;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }
    }

    a.accordion-toggle {
      display: inline-block;
    }

    [class^="icon-"],
    [class*=" icon-"] {
      color: #000;
    }
  }
}

.print-control .btn {
  padding-left: 4px;
  padding-right: 4px;
}

.upload-buttons .btn {
  margin-right: 0;
}

/** Tables */

table {
  table-layout: fixed;

  .popover-title {
    text-overflow: ellipsis;
    word-break: break-all;
  }

  th, td {
    overflow: hidden;

    // gcode files
    &.gcode_files_name {
      text-overflow: ellipsis;
      text-align: left;
      .nowrap;
    }

    &.gcode_files_action {
      width: 90px;
      .actioncol;
    }

    // timelapse files
    &.timelapse_files_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.timelapse_files_size {
      text-align: right;
      width: 55px;
    }

    &.timelapse_files_action {
      width: 45px;
      .actioncol;
    }

    // user settings
    &.settings_users_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.settings_users_active, &.settings_users_admin {
      text-align: center;
      width: 55px;
    }

    &.settings_users_actions {
      width: 60px;
      .actioncol;
    }

    // log files
    &.settings_logs_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.settings_logs_size {
      text-align: right;
      width: 70px;
    }

    &.settings_logs_date {
      text-align: left;
      width: 130px;
    }

    &.settings_logs_action {
      width: 70px;
      .actioncol;
    }

    // Printer profiles
    &.settings_printerProfiles_profiles_name {
      text-overflow: ellipsis;
      text-align: left;
    }

    &.settings_printerProfiles_profiles_model {
      text-align: left;
      width: 250px;
    }

    &.settings_printerProfiles_profiles_action {
      width: 80px;
      .actioncol;
    }

  }
}

/** Temperature tab */

#temperature-graph {
  height: 350px;
  width: 100%;
  background-image: url("../img/graph-background.png");
  background-position: center;
  background-repeat: no-repeat;
}

.tab-content, .tab-pane {
  overflow: visible;
}

.tempInput {
  width: 50px;
}

#temp_newTemp, #temp_newBedTemp, #speed_innerWall, #speed_outerWall, #speed_fill, #speed_support,
#webcam_timelapse_interval, #webcam_timelapse_postRoll, #webcam_timelapse_fps {
  text-align: right;
}

ul.dropdown-menu li a {
  cursor: pointer;
}

/** Connection settings */

#connection_ports, #connection_baudrates, #connection_printers {
  width: 100%;
}

/** Offline & Reload overlay */

#offline_overlay,
#reloadui_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  display: none;
}

#offline_overlay_background,
#reloadui_overlay_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

#offline_overlay_wrapper,
#reloadui_overlay_wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 60px;

  .container {
    margin: auto;
  }
}

/** Webcam */

#webcam_container {
  width: 100%;
  position: relative;
  outline: none;

  //min-height: 440px;

  .flipH {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
  }

  .flipV {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
  }

  .flipH.flipV {
    -webkit-transform: scaleX(-1) scaleY(-1);
    -moz-transform: scaleX(-1) scaleY(-1);
    -ms-transform: scaleX(-1) scaleY(-1);
  }

  .rotate90 {
    transform: rotate(-90deg);
  }

  .keycontrol_overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 85%;
    color: white;
    padding: 0;

    kbd {
      border: 1px solid #eeeeee;
      border-radius: 3px;
      margin-left: 2px;
      margin-right: 2px;
      font-size: 90%;
      padding: 2px;
      min-width: 1em;
    }

    .keycontrol_overlay_heading {
      position: relative;
      padding: 10px;
      font-weight: bold;
    }

    .keycontrol_overlay_column {
      position: relative;
      width: 45%;
      padding: 10px;
      float: left;
    }
  }
}

/** GCODE file manager */

#files {
  .gcode_files {
    @padding: 5px;
    @scrollBar: 5px;
    @line-height: 20px;

    padding-right: @scrollBar + 2px;

    .entry {
      padding: @padding;
      line-height: @line-height;
      border-bottom: 1px solid #ddd;
      position: relative;

      &:hover {
        background-color: #f5f5f5;
      }

      .title {
        text-overflow: ellipsis;
        word-break: break-all;
      }

      .uploaded, .size, .additionalInfo {
        font-size: 85%;
        color: #999;
      }

      .action-buttons {
        position: absolute;
        bottom: @padding;
        right: @padding;
      }

      .additionalInfo {
        padding-bottom: @line-height + 2px;
      }
    }
  }

  .upload-buttons {
    margin-top: 10px;
  }

  .form-search {
    text-align: center;
    margin-bottom: 5px !important;
  }
}

/** Control tab */

#control {
  overflow: hidden;

  .jog-panel {
    float: left;
    margin-right: 19px;
  }

  h1 {
    text-align: left;
  }

  .jog-panel {
    >div {
      text-align: center;
    }

    >div.distance {
      text-align: left;
    }

    .slider {
      margin-bottom: 10px;
    }
  }

  .box {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 8px;
  }

  .control-box {
    display: block;
    height: 30px;
    margin-bottom: 10px;
  }

  .btn-group {
    margin-bottom: 10px;
  }

  .btn-group.distance > .btn {
    width: 43px;
    padding: 3px 0;
    height: 30px;
  }

  .slider-handle {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -3px;
  }

  .custom_section {
    h1 {
      cursor: pointer;
    }
  }

  .custom_section_horizontal .custom_control {
    display: inline-block;
  }

  .custom_section_vertical .custom_control {
      display:block;
  }

  .custom_control {
    .slider {
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 2px;
    }
  }
}

/** GCODE viewer */

#gcode {
  .progress {
    width: 582px;

    .bar {
      .transition(width 0s linear);
    }
  }

  .canvas_container {
    position: relative;
  }

  #gcode_layer_slider {
    position: absolute;
    right: 0;
    top: 0;
    height: 568px;
    float: right;

    .slider-handle {
      width: 14px;
      height: 14px;
      margin-left: -3px;
      margin-top: -7px;
    }
  }

  #gcode_command_slider {
    .slider-handle {
      width: 14px;
      height: 14px;
      margin-left: -7px;
      margin-top: -3px;
    }
  }
}

/** Terminal output */

#term {
  .terminal {
    #terminal-output {
      min-height: 340px;
      margin-bottom: 5px;
    }

    margin-bottom: 30px;
  }

  #terminal-sendpanel {
    text-align: right;
  }
}

/** Settings dialog */
#settings_dialog {
  .modal-body {
    #settings_dialog_menu {
      margin-left: 0;
    }
  }
}

#settings_appearance_managelanguagesdialog_emptylist {
  overflow: hidden;
  width: 100%;
  height: 300px;
  text-align: center;
  display: table;

  div {
    display: table-cell;
    vertical-align: middle;
  }
}

/** Footer */
.footer {
  ul {
    margin: 0;

    li {
      &:first-child {
        margin-left: 0;
      }

      display: inline;
      margin-left: 1em;
      font-size: 85%;
      a {
        color: #555;
      }
    }

  }
}

/** Notifications */

.ui-pnotify .alert a {
  color: #c09853;
}
.ui-pnotify .alert-error a,
.ui-pnotify .alert-danger a {
  color: #b94a48;
}
.ui-pnotify .alert-success a {
  color: #468847;
}
.ui-pnotify .alert-info a {
  color: #3a87ad;
}

.pnotify_additional_info {
  .pnotify_more {
    font-size: 85%;
  }
}

/** General helper classes */

.text-right {
  text-align: right;
}

.overflow_visible {
  overflow: visible !important;
}

.border_box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.hidden {
  display: none;
}

textarea.block {
  .border_box;
  width: 100%;
}

#drop_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;

  &.in {
    display: block;
  }

  #drop_overlay_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  }

  #drop_overlay_wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 60px;

    @dropzone_width: 50%;
    @dropzone_height: 100%;
    @border_color: #cccccc;

    #drop, #drop_background {
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 0;
      width: 100%;
    }

    #drop_locally, #drop_locally_background {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -50%;
      width: 50%;
      border-right: 2px dashed @border_color;
    }

    #drop_sd, #drop_sd_background {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: 0;
      width: 50%;
      border-left: 2px dashed @border_color;
    }

    .dropzone {
      height: @dropzone_height;
      z-index: 10001;

      color: #ffffff;
      font-size: 30px;

      i {
        font-size: 50px;
      }

      .text {
        display: block;
        text-align: center;
        line-height: 40px;
        position: absolute;
        width: 100%;
        bottom: 5%;

        filter:alpha(opacity=100);
        -moz-opacity:1.0;
        -khtml-opacity: 1.0;
        opacity: 1.0;
      }
    }

    .dropzone_background {
      width: @dropzone_width;
      height: @dropzone_height;

      background-color: #000000;
      filter:alpha(opacity=25);
      -moz-opacity:0.25;
      -khtml-opacity: 0.25;
      opacity: 0.25;

      &.hover {
        background-color: #000000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;

      }

      &.fade {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        opacity: 1;
      }
    }
  }
}

.icon-sd-black-14 {
  background: url("../img/icon-sd-black-14.png") 0 3px no-repeat;
  width: 11px;
  height: 17px;
  display: inline-block !important;
}

.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/** Styles for Bootstrap Slider */

.slider {
  .slider-selection {
    .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
  }

  &.slider-disabled .slider-selection {
    background-image: none;
    .opacity(65);
    .box-shadow(none);
  }

  .slider-track {
    background-color: @wellBackground;
    border: 1px solid darken(@wellBackground, 7%);
    .border-radius(@baseBorderRadius);
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  }

  &.slider-disabled .slider-track {
    background-image: none;
    .opacity(65);
    .box-shadow(none);
  }

  .slider-handle {
    .btn;
    padding: 0;
    margin-bottom: 0;
    .opacity(100);

    &.hide {
      display: none;
    }

    &.round {
      .border-radius(50%);
    }
  }
}

.modal.large {
  width: 975px;
  margin-left: -487px;
}

.full-sized-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;

  padding: 15px;

  .row-fluid {
    height: 100%;
  }

  @media (max-width: 979px) {
    position: static;
  }
}

.scrollable {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.input-append, .input-prepend {
  .add-on {
    &.add-on-limited {
      overflow-x: hidden;
      text-overflow: ellipsis;
      width: inherit;
    }
  }
}

.control-group.error .input-prepend .fileinput-button,
.control-group.error .input-append .fileinput-button {
  border-color: #b94a48;
}

input[type=number] {
  text-align: right;
}


Logo font size

Logo font size

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


Updated bootstrap less with swatches described by Megan

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/ArdentMC/openFDA-Prototype.git/'


`header--section` layout

`header--section` layout

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/putterschool/styleguide.git/'


Touch friendly number input using a 'spin-wheel' somewhat like what is commonly used in mobile OSes. NOTE: This uses touch events through hammer.js and is so far only tested through chrome's touch emulation, so the precision and feeling might not be 100% yet.

.pretty-spinner {
	position: relative;
	height: calc(~"5 * 30px");
	width: 50px;
	z-index: 25;
	// overflow: hidden;
	box-shadow: 2px 3px 18px 3px fade(black, 20%);

	.pretty-spinner-inner {
		background: linear-gradient(to bottom,
									fade(black, 30%) 0%,
									transparent 25%,
									transparent 75%,
									fade(black, 30%) 100%);

		overflow: hidden;
		width: 100%;
		height: 100%;

		.pretty-spinner-wheel {
			-webkit-transition: margin-top linear 0.1s;
			// Mozilla does not spin the wheel at all when animating the values
			// -moz-transition: margin-top linear 0.1s;

			width: 100%;
			height: 30px;
			background: fade(white, 70%);
			border: 1px solid fade(grey, 20%);
			padding: 5px;
			text-align: center;
			vertical-align: middle;
			pointer-events: none;

			font-weight: bold;

			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
	}
}

.arrow_box:after, .arrow_box:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: fade(white, 70%);
	border-width: 12px;
	top: 50%;
	margin-top: -12px;
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-right-color: fade(grey, 20%);
	border-width: 14px;
	top: 50%;
	margin-top: -14px;
}

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


Update static/vendors/bootstrap/less/mixins/progress-bar.less

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

// Progress bars

.progress-bar-variant(@color) {
  background-color: @color;

  // Deprecated parent class requirement as of v3.2.0
  .progress-striped & {
    #gradient > .striped();
  }
}

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


remove underline on hover for tab carousel

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/DellGDC/dell-ui-components.git/'


Create styles.less

Create styles.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/C-Bouthoorn/obtuse-octo-turtle.git/'


tools position

tools position

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/shiftplanning/foxydb.git/'


Fix typo

Fix typo

should be 'bordered' not 'bordeblack'

probably an issue with find and replacing the term 'red'

/*!
 * # Semantic UI - Icon
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'icon';

@import (multiple) '../../theme.config';

/*******************************
             Icon
*******************************/

@font-face {
  font-family: 'Icons';
  src: @fallbackSRC;
  src: @src;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.icon {
  display: inline-block;
  opacity: @opacity;

  margin: 0em @distanceFromText 0em 0em;

  width: @width;
  height: @height;

  font-family: 'Icons';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;

  speak: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

i.icon:before {
  background: none !important;
}

/*******************************
             Types
*******************************/

/*--------------
    Loading
---------------*/

i.icon.loading {
  height: 1em;
  line-height: 1;
  animation: icon-loading @loadingDuration linear infinite;
}
@keyframes icon-loading {
 from {
    transform: rotate(0deg);
 }
 to {
    transform: rotate(360deg);
 }
}

/*******************************
             States
*******************************/

i.icon.hover {
  opacity: 1 !important;
}

i.icon.active {
  opacity: 1 !important;
}

i.emphasized.icon {
  opacity: 1 !important;
}

i.disabled.icon {
  opacity: @disabledOpacity !important;
}

/*******************************
           Variations
*******************************/

/*-------------------
        Fitted
--------------------*/

i.fitted.icon {
  width: auto;
  margin: 0em;
}

/*-------------------
         Link
--------------------*/

i.link.icon {
  cursor: pointer;
  opacity: @linkOpacity;
  transition: opacity @defaultDuration @defaultEasing;
}
i.link.icon:hover {
  opacity: 1 !important;
}

/*-------------------
      Circular
--------------------*/

i.circular.icon {
  border-radius: 500em !important;
  line-height: 1 !important;

  padding: @circularPadding !important;
  box-shadow: @circularShadow;

  width: @circularSize !important;
  height: @circularSize !important;
}
i.circular.inverted.icon {
  border: none;
  box-shadow: none;
}

/*-------------------
      Flipped
--------------------*/

i.flipped.icon,
i.horizontally.flipped.icon {
  transform: scale(-1, 1);
}
i.vertically.flipped.icon {
  transform: scale(1, -1);
}

/*-------------------
      Rotated
--------------------*/

i.rotated.icon,
i.right.rotated.icon,
i.clockwise.rotated.icon {
  transform: rotate(90deg);
}

i.left.rotated.icon,
i.counterclockwise.rotated.icon {
  transform: rotate(-90deg);
}

/*-------------------
      Bordered
--------------------*/

i.bordered.icon {
  line-height: 1;
  vertical-align: baseline;

  width: @borderedSize;
  height: @borderedSize;
  padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
  box-shadow: @borderedShadow;
}
i.bordered.inverted.icon {
  border: none;
  box-shadow: none;
}

/*-------------------
      Inverted
--------------------*/

/* Inverted Shapes */
i.inverted.bordered.icon,
i.inverted.circular.icon {
  background-color: @black !important;
  color: @white !important;
}

i.inverted.icon {
  color: @white;
}

/*-------------------
       Colors
--------------------*/

/* Red */
i.red.icon {
  color: @red !important;
}
i.inverted.red.icon {
  color: @lightRed !important;
}
i.inverted.bordered.red.icon,
i.inverted.circular.red.icon {
  background-color: @red !important;
  color: @white !important;
}

/* Orange */
i.orange.icon {
  color: @orange !important;
}
i.inverted.orange.icon {
  color: @lightOrange !important;
}
i.inverted.bordered.orange.icon,
i.inverted.circular.orange.icon {
  background-color: @orange !important;
  color: @white !important;
}

/* Yellow */
i.yellow.icon {
  color: @yellow !important;
}
i.inverted.yellow.icon {
  color: @lightYellow !important;
}
i.inverted.bordered.yellow.icon,
i.inverted.circular.yellow.icon {
  background-color: @yellow !important;
  color: @white !important;
}

/* Olive */
i.olive.icon {
  color: @olive !important;
}
i.inverted.olive.icon {
  color: @lightOlive !important;
}
i.inverted.bordered.olive.icon,
i.inverted.circular.olive.icon {
  background-color: @olive !important;
  color: @white !important;
}

/* Green */
i.green.icon {
  color: @green !important;
}
i.inverted.green.icon {
  color: @lightGreen !important;
}
i.inverted.bordered.green.icon,
i.inverted.circular.green.icon {
  background-color: @green !important;
  color: @white !important;
}

/* Teal */
i.teal.icon {
  color: @teal !important;
}
i.inverted.teal.icon {
  color: @lightTeal !important;
}
i.inverted.bordered.teal.icon,
i.inverted.circular.teal.icon {
  background-color: @teal !important;
  color: @white !important;
}

/* Blue */
i.blue.icon {
  color: @blue !important;
}
i.inverted.blue.icon {
  color: @lightBlue !important;
}
i.inverted.bordered.blue.icon,
i.inverted.circular.blue.icon {
  background-color: @blue !important;
  color: @white !important;
}

/* Violet */
i.violet.icon {
  color: @violet !important;
}
i.inverted.violet.icon {
  color: @lightViolet !important;
}
i.inverted.bordered.violet.icon,
i.inverted.circular.violet.icon {
  background-color: @violet !important;
  color: @white !important;
}

/* Purple */
i.purple.icon {
  color: @purple !important;
}
i.inverted.purple.icon {
  color: @lightPurple !important;
}
i.inverted.bordered.purple.icon,
i.inverted.circular.purple.icon {
  background-color: @purple !important;
  color: @white !important;
}

/* Pink */
i.pink.icon {
  color: @pink !important;
}
i.inverted.pink.icon {
  color: @lightPink !important;
}
i.inverted.bordered.pink.icon,
i.inverted.circular.pink.icon {
  background-color: @pink !important;
  color: @white !important;
}

/* Brown */
i.brown.icon {
  color: @brown !important;
}
i.inverted.brown.icon {
  color: @lightBrown !important;
}
i.inverted.bordered.brown.icon,
i.inverted.circular.brown.icon {
  background-color: @brown !important;
  color: @white !important;
}

/* Grey */
i.grey.icon {
  color: @grey !important;
}
i.inverted.grey.icon {
  color: @lightGrey !important;
}
i.inverted.bordered.grey.icon,
i.inverted.circular.grey.icon {
  background-color: @grey !important;
  color: @white !important;
}

/* Black */
i.black.icon {
  color: @black !important;
}
i.inverted.black.icon {
  color: @lightBlack !important;
}
i.inverted.bordered.black.icon,
i.inverted.circular.black.icon {
  background-color: @black !important;
  color: @white !important;
}

/*-------------------
        Sizes
--------------------*/

i.mini.icon,
i.mini.icons {
  line-height: 1;
  font-size: @mini;
}
i.tiny.icon,
i.tiny.icons {
  line-height: 1;
  font-size: @tiny;
}
i.small.icon,
i.small.icons {
  line-height: 1;
  font-size: @small;
}
i.icon,
i.icons {
  font-size: @medium;
}
i.large.icon,
i.large.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @large;
}
i.big.icon,
i.big.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @big;
}
i.huge.icon,
i.huge.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @huge;
}
i.massive.icon,
i.massive.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @massive;
}

/*******************************
            Groups
*******************************/

i.icons {
  display: inline-block;
  position: relative;
  line-height: 1;
}

i.icons .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: 0em;
  margin: 0;
}

i.icons .icon:first-child {
  position: static;
  width: auto;
  height: auto;
  vertical-align: top;
  transform: none;
  margin-right: @distanceFromText;
}

/* Corner Icon */
i.icons .corner.icon {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  transform: none;
  font-size: @cornerIconSize;
  text-shadow: @cornerIconShadow;
}

i.icons .inverted.corner.icon {
  text-shadow: @cornerIconInvertedShadow;
}

.loadUIOverrides();

/*!
 * # Semantic UI - Icon
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'icon';

@import (multiple) '../../theme.config';

/*******************************
             Icon
*******************************/

@font-face {
  font-family: 'Icons';
  src: @fallbackSRC;
  src: @src;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

i.icon {
  display: inline-block;
  opacity: @opacity;

  margin: 0em @distanceFromText 0em 0em;

  width: @width;
  height: @height;

  font-family: 'Icons';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;

  speak: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

i.icon:before {
  background: none !important;
}

/*******************************
             Types
*******************************/

/*--------------
    Loading
---------------*/

i.icon.loading {
  height: 1em;
  line-height: 1;
  animation: icon-loading @loadingDuration linear infinite;
}
@keyframes icon-loading {
 from {
    transform: rotate(0deg);
 }
 to {
    transform: rotate(360deg);
 }
}

/*******************************
             States
*******************************/

i.icon.hover {
  opacity: 1 !important;
}

i.icon.active {
  opacity: 1 !important;
}

i.emphasized.icon {
  opacity: 1 !important;
}

i.disabled.icon {
  opacity: @disabledOpacity !important;
}

/*******************************
           Variations
*******************************/

/*-------------------
        Fitted
--------------------*/

i.fitted.icon {
  width: auto;
  margin: 0em;
}

/*-------------------
         Link
--------------------*/

i.link.icon {
  cursor: pointer;
  opacity: @linkOpacity;
  transition: opacity @defaultDuration @defaultEasing;
}
i.link.icon:hover {
  opacity: 1 !important;
}

/*-------------------
      Circular
--------------------*/

i.circular.icon {
  border-radius: 500em !important;
  line-height: 1 !important;

  padding: @circularPadding !important;
  box-shadow: @circularShadow;

  width: @circularSize !important;
  height: @circularSize !important;
}
i.circular.inverted.icon {
  border: none;
  box-shadow: none;
}

/*-------------------
      Flipped
--------------------*/

i.flipped.icon,
i.horizontally.flipped.icon {
  transform: scale(-1, 1);
}
i.vertically.flipped.icon {
  transform: scale(1, -1);
}

/*-------------------
      Rotated
--------------------*/

i.rotated.icon,
i.right.rotated.icon,
i.clockwise.rotated.icon {
  transform: rotate(90deg);
}

i.left.rotated.icon,
i.counterclockwise.rotated.icon {
  transform: rotate(-90deg);
}

/*-------------------
      Bordered
--------------------*/

i.bordered.icon {
  line-height: 1;
  vertical-align: baseline;

  width: @borderedSize;
  height: @borderedSize;
  padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
  box-shadow: @borderedShadow;
}
i.bordered.inverted.icon {
  border: none;
  box-shadow: none;
}

/*-------------------
      Inverted
--------------------*/

/* Inverted Shapes */
i.inverted.bordered.icon,
i.inverted.circular.icon {
  background-color: @black !important;
  color: @white !important;
}

i.inverted.icon {
  color: @white;
}

/*-------------------
       Colors
--------------------*/

/* Red */
i.red.icon {
  color: @red !important;
}
i.inverted.red.icon {
  color: @lightRed !important;
}
i.inverted.bordered.red.icon,
i.inverted.circular.red.icon {
  background-color: @red !important;
  color: @white !important;
}

/* Orange */
i.orange.icon {
  color: @orange !important;
}
i.inverted.orange.icon {
  color: @lightOrange !important;
}
i.inverted.bordered.orange.icon,
i.inverted.circular.orange.icon {
  background-color: @orange !important;
  color: @white !important;
}

/* Yellow */
i.yellow.icon {
  color: @yellow !important;
}
i.inverted.yellow.icon {
  color: @lightYellow !important;
}
i.inverted.bordered.yellow.icon,
i.inverted.circular.yellow.icon {
  background-color: @yellow !important;
  color: @white !important;
}

/* Olive */
i.olive.icon {
  color: @olive !important;
}
i.inverted.olive.icon {
  color: @lightOlive !important;
}
i.inverted.bordered.olive.icon,
i.inverted.circular.olive.icon {
  background-color: @olive !important;
  color: @white !important;
}

/* Green */
i.green.icon {
  color: @green !important;
}
i.inverted.green.icon {
  color: @lightGreen !important;
}
i.inverted.bordered.green.icon,
i.inverted.circular.green.icon {
  background-color: @green !important;
  color: @white !important;
}

/* Teal */
i.teal.icon {
  color: @teal !important;
}
i.inverted.teal.icon {
  color: @lightTeal !important;
}
i.inverted.bordered.teal.icon,
i.inverted.circular.teal.icon {
  background-color: @teal !important;
  color: @white !important;
}

/* Blue */
i.blue.icon {
  color: @blue !important;
}
i.inverted.blue.icon {
  color: @lightBlue !important;
}
i.inverted.bordered.blue.icon,
i.inverted.circular.blue.icon {
  background-color: @blue !important;
  color: @white !important;
}

/* Violet */
i.violet.icon {
  color: @violet !important;
}
i.inverted.violet.icon {
  color: @lightViolet !important;
}
i.inverted.bordered.violet.icon,
i.inverted.circular.violet.icon {
  background-color: @violet !important;
  color: @white !important;
}

/* Purple */
i.purple.icon {
  color: @purple !important;
}
i.inverted.purple.icon {
  color: @lightPurple !important;
}
i.inverted.bordered.purple.icon,
i.inverted.circular.purple.icon {
  background-color: @purple !important;
  color: @white !important;
}

/* Pink */
i.pink.icon {
  color: @pink !important;
}
i.inverted.pink.icon {
  color: @lightPink !important;
}
i.inverted.bordered.pink.icon,
i.inverted.circular.pink.icon {
  background-color: @pink !important;
  color: @white !important;
}

/* Brown */
i.brown.icon {
  color: @brown !important;
}
i.inverted.brown.icon {
  color: @lightBrown !important;
}
i.inverted.bordered.brown.icon,
i.inverted.circular.brown.icon {
  background-color: @brown !important;
  color: @white !important;
}

/* Grey */
i.grey.icon {
  color: @grey !important;
}
i.inverted.grey.icon {
  color: @lightGrey !important;
}
i.inverted.bordered.grey.icon,
i.inverted.circular.grey.icon {
  background-color: @grey !important;
  color: @white !important;
}

/* Black */
i.black.icon {
  color: @black !important;
}
i.inverted.black.icon {
  color: @lightBlack !important;
}
i.inverted.bordeblack.black.icon,
i.inverted.circular.black.icon {
  background-color: @black !important;
  color: @white !important;
}

/*-------------------
        Sizes
--------------------*/

i.mini.icon,
i.mini.icons {
  line-height: 1;
  font-size: @mini;
}
i.tiny.icon,
i.tiny.icons {
  line-height: 1;
  font-size: @tiny;
}
i.small.icon,
i.small.icons {
  line-height: 1;
  font-size: @small;
}
i.icon,
i.icons {
  font-size: @medium;
}
i.large.icon,
i.large.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @large;
}
i.big.icon,
i.big.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @big;
}
i.huge.icon,
i.huge.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @huge;
}
i.massive.icon,
i.massive.icons {
  line-height: 1;
  vertical-align: middle;
  font-size: @massive;
}

/*******************************
            Groups
*******************************/

i.icons {
  display: inline-block;
  position: relative;
  line-height: 1;
}

i.icons .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: 0em;
  margin: 0;
}

i.icons .icon:first-child {
  position: static;
  width: auto;
  height: auto;
  vertical-align: top;
  transform: none;
  margin-right: @distanceFromText;
}

/* Corner Icon */
i.icons .corner.icon {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  transform: none;
  font-size: @cornerIconSize;
  text-shadow: @cornerIconShadow;
}

i.icons .inverted.corner.icon {
  text-shadow: @cornerIconInvertedShadow;
}

.loadUIOverrides();