Updated inspector help text appearance.

Updated inspector help text appearance.

@inspector-background-color: #221e1c;
@inspector-region-background-color: #282828;
@inspector-divider-bottom: rgba(0, 0, 0, 0.3);
@inspector-divider-top: rgba(255, 255, 255, 0.05);
@inspector-status-border-color: #E2E2E2;
@inspector-subtitle-color: #555555;
@confirm-button-color: #DD4814;
@disabled-input-background-color: #727272;
@disabled-input-text-color: #252525;

.yui3-juju-inspector {
    .customize-scrollbar;

    .left-breakout {
        .type9;
        position: absolute;
        top: 20px;
        bottom: @navbar-bottom-height + 20px;
        right: 327px;
        overflow-y: auto;
        overflow-x: hidden;
        width: @bws-panel-width;
        background-color: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

        .close-slot {
            position: absolute;
            // Need to raise it above the content.
            z-index: 1;
            display: block;
            top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            background: transparent
                url(/juju-ui/assets/images/panel_close.png)
                left top no-repeat;
        }
        .charm .yui3-tabview {
            margin-top: 30px;
        }
        .unit-overview {
            .header {
                .type13;
                padding: 30px;
                background-color: @bws-background;
                border-bottom: 1px solid @bws-border;

                h2 {
                    .type2;
                    margin-bottom: 20px;
                }
                ul {
                    margin: 0;
                    list-style: none;

                    li {
                        line-height: 1.55;
                    }
                }
            }
            .unit-info-tabs {
                padding: 30px;

                h3 {
                    .type5;
                    margin-bottom: 20px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid @bws-border;
                }
                tr {
                    border-bottom: 1px solid @bws-border;

                    th,
                    td {
                        padding: 10px 20px;
                    }
                    th {
                        .type5;
                        text-align: left;
                        padding-top: 0;
                        padding-bottom: 15px;
                    }
                }
            }
        }
    }

    .juju-inspector {
        .create-border-radius(@border-radius);
        position: absolute;
        top: 20px;
        bottom: @navbar-bottom-height + 20px;
        right: 35px;
        width: 292px;
        min-height: 250px;
        border: 0;
        background-color: @inspector-background-color;
        color: #fff;
        /* Can be removed once the old inspector styles are removed. */
        margin: 0;

        h1, h2, h3, h4, h5, h6 {
            background-color: @inspector-region-background-color;
            padding-left: 1em;
        }

        input[type=checkbox].hidden-checkbox {
            display: none;
        }
        .toggle {
            font-size: 12px;

            span {
                display: inline-block;
                vertical-align: top;
                line-height: 30px;
            }
            .toggle-switch {
                display: inline-block;
                vertical-align: top;
                float: right;

                label {
                    height: 26px;
                    width: 50px;
                    background-color: @inspector-background-color;
                    .create-border-radius(@border-radius);
                    display: block;
                    position: relative;
                    margin: 0;

                    &.light {
                        background-color: @inspector-region-background-color;
                    }
                    .handle {
                        height: 18px;
                        width: 18px;
                        background-color: @confirm-button-color;
                        .create-border-radius(@border-radius);
                        position: absolute;
                        margin: 4px;
                        cursor: pointer;
                        text-align: center;
                        left: 0;
                        -moz-transition: left .1s ease-in-out;
                        -webkit-transition: left .1s ease-in-out;
                        transition: left .1s ease-in-out;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                    .handle:before {
                        content: '\2717';
                    }
                }
                input.hidden-checkbox:checked ~ label .handle {
                    left: 25px;
                }
                input.hidden-checkbox:checked ~ label .handle:before {
                    content: '\2713';
                }
            }
        }
        .controls {

            button {
                .create-border-radius(@border-radius);
                width: 130px;
                height: 25px;
                margin: 10px 0;
                border: none;
                color: white;
                font-weight: bold;

                &.cancel {
                    background-color: #A3A3A3;
                    margin-left: 10px;
                }

                &.confirm {
                    background-color: @confirm-button-color;
                    float: right;
                    margin-right: 10px;
                    &:disabled {
                        background-color: #802E0E;
                        color: #eee;
                    }
                }
            }
        }

        .settings-wrapper {
            position: relative;
            width: 268px;

            label {
                font-size: 14px;
                margin: 14px 0 7px 0;
                font-weight: bold;
            }

            textarea {
                width: 260px;
            }

            .settings-description {
                font-size: 12px;

                /* below hyphenation code was taken from:
                http://www.newnet-soft.com/blog/csstypography */
                -ms-word-break: break-all;
                word-break: break-all;

                // Non standard for webkit
                word-break: break-word;

                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                hyphens: auto;

                -webkit-hyphenate-before: 2;
                -webkit-hyphenate-after: 3;
                hyphenate-lines: 3;
            }

            .warning-message {
                color: red;
                padding: 1em;
            }
            .conflicted {
                position: absolute;
                border: 1px solid grey;
                margin-top: -140px;
                background-color: white;
            }
        }

        .config-file {
            padding: 10px 5px 10px 5px;

            input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                z-index: 0;
            }

            .fakebutton {
                .create-border-radius(@border-radius);
                font-family: @font-family-medium;
                border: 1px solid #6B6B6B;
                color: white;
                font-size: 14px;
                font-weight: bold;
                padding: 5px;
                z-index: 2;
                cursor: pointer;
            }
        }

        .ghost {
            .header-slot {
                header {
                    margin-bottom: 0;
                    border-bottom: none;
                }
            }
            .ghost-config-header {
                font-size: 17px;
                height: 35px;
                line-height: 35px;
                padding-left: 35px;
            }
            .ghost-config-content {
                padding: 15px 10px;
                background-color: @inspector-region-background-color;

                input[name=number-units] {
                    display: inline-block;
                    width: 120px;
                    margin-bottom: 0;
                }
                label[for=number-units] {
                    display: inline-block;
                    margin-left: 25px;
                    vertical-align: middle;
                }
                &.use-defaults {
                    textarea {
                        background-color: @disabled-input-background-color;
                        border-color: @inspector-background-color;
                        cursor: not-allowed;
                        color: @disabled-input-text-color;
                    }
                    input[type=text] {
                        background-color: @disabled-input-background-color;
                        border-color: @inspector-background-color;
                        cursor: not-allowed;
                        color: @disabled-input-text-color;
                    }
                    .fakebutton {
                        color: @disabled-input-background-color;
                        border-color: @disabled-input-background-color;
                        cursor: default;
                    }
                }
            }
        }

        /* Resetting panel styles. Can be removed after old inspector styles are
           removed. */
        .charm-panel-configure {
            background: transparent;
            float: none;
            border: 0;
            height: auto;
            width: auto;
            padding: 0 20px;

            .title {
                font-size: 20px;
                font-weight: 300;
                line-height: 1.2;
                margin: 0;
            }
            .name {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
            }
        }

        .control-description,
        .control-label {
            font-size: 14px;
            font-weight: 300;
        }
        .control-label {
            margin-bottom: 10px;
        }

        .control-group {
            margin: 0;
            padding: 20px;
            border-bottom: 1px solid @inspector-divider-bottom;
            border-top: 1px solid @inspector-divider-top;

            .well {
                background-color: transparent;
                border: 0;
                margin-bottom: 10px;
                min-height: 20px;
                padding: 0;
            }
        }

        .viewlet-container {
            overflow-y: auto;
            border-top: 1px solid @inspector-divider-top;
            /* overwritten by the recalculateHeight() method in
               viewlet-manager.js. Important to avoid flash of incorrectly
               calculated height */
            max-height: 250px;
        }

        .content {
            margin: 1em;
        }

        .header-slot {
            header {
                background-color: @inspector-region-background-color;
                border-bottom: 1px solid #1C1817;
                padding: 15px;
                margin-bottom: 6px;

                .service-charm {
                    color: @charm-panel-background-color;
                    width: 100%;

                    .service-name {
                        font-size: 20px;
                        font-weight: 300;
                        line-height: 1.2;
                    }
                    input.service-name {
                        width: 125px;
                    }
                    .charm-icon {
                        width: 64px;
                        height: 64px;
                        margin-right: 1em;
                        background: transparent url(/juju-ui/assets/images/charm_64.png) left top no-repeat;
                        img {
                            /* bootstrap sets this to middle */
                            vertical-align: baseline;
                        }
                    }
                    .details-wrapper {
                        width: 135px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .charm-url {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.3;
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .close {
                        /* required to overwrite bootstrap styles */
                        text-shadow: none;
                        color: #cbcbcb;
                        font-weight: normal;
                        opacity: 1;
                        font-size: 30px;
                        /* not overwriting */
                        vertical-align: top;
                    }
                    div {
                        display: inline-block;
                    }
                }
            }
        }

        .viewlet-manager-navigation {
            margin: 0;
            padding-left: 65px;
            background-color: @inspector-region-background-color;

            li {
                display: inline-block;
                margin-right: 40px;

                &:last-child {
                    margin-right: 0;
                }
                a {
                    .border-box;
                    display: block;
                    height: 50px;
                    padding-top: 13px;

                    &:hover {
                        text-decoration: none;
                    }
                    &.active {
                        border-bottom: 2px solid @charm-panel-orange;

                        .normal {
                            display: none;
                        }
                        .selected {
                            display: inline-block;
                        }
                    }
                    .selected {
                        display: none;
                    }
                }
            }
        }

        .viewlet-manager-footer {
            position: relative;
        }

        .view-container {
            border-top: 1px solid @inspector-divider-top;
            overflow: auto;

            h2 {
                font-size: 18px;
                padding-left: 0;
            }

            .toggle-settings-help {
                padding: 0 20px 20px;
                cursor: pointer;
            }

            .settings-wrapper {
                position: relative;
                padding: 0 10px;

                label {
                    font-size: 14px;
                    margin: 14px 0 7px 0;
                    font-weight: bold;
                }

                .settings-description {
                    font-size: 12px;
                }

                .warning-message {
                    color: red;
                    padding: 1em;
                }
                .conflicted {
                    position: absolute;
                    border: 1px solid grey;
                    margin-top: -140px;
                    background-color: white;
                }
            }
            .toggle {
                padding: 10px;

                label {
                   margin: 0;
                }
            }

        }

        .status {
            display: inline-block;
            width: 33%;
            text-align: center;
            &.running {
                background-color: #00b711;
            }
            &.pending {
                background-color: #ede837;
            }
            &.error {
                background-color: #ba0000;
            }
        }
        .destroy-service-trigger{
            padding-left: 10px;
            height: 30px;

            span {
                font-size: 11px;
                font-weight: bold;
                cursor: pointer;
            }
        }

        .destroy-service-prompt {
            overflow: hidden;
            height: 95px;
            background-color: @inspector-region-background-color;
            -moz-transition: .3s, height .3s;
            -webkit-transition: .25s, height .3s;
            transition: .3s, height .3s;
            position: absolute;
            bottom: 0;

            .message {
                margin: 5px 15px;
            }

            .buttons {
                a {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    box-shadow: 0 2px 2px -2px #777777 inset;
                    color: #fff;
                    background: #dd4814;
                    padding: 5px 0;
                    text-decoration: none;
                    text-align: center;
                    margin-top: 10px;
                    width: 110px;
                    float: left;
                    margin-left: 13px;
                }

                a:last-of-type {
                    mergin-right: 0;
                }

                .grey {
                    background: #999;
                }
            }
        }

        .destroy-service-prompt.closed {
            height: 0;
        }

        .viewlet-wrapper{
            h3, h2, legend {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                padding: 10px 20px;
                color: @charm-panel-configure-title-color;
                margin-bottom: 0;
                width: auto;
            }

            .content {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                margin: 0;
                padding: 10px;
            }
        }

        .overview-unit-list {
            margin-left: 0;

            .action-button-wrapper {
                height: 50px;
            }

            .status-unit-header {
                background-color: @inspector-region-background-color;
                padding: 15px 15px 15px 40px;
                font-size: 14px;
                cursor: pointer;
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                background-position: 20px center;
                background-repeat: no-repeat;
                span {
                    margin-right: 5px;
                }

                ul {
                    background: white;
                }

                .chevron {
                    display: inline-block;
                    height: 9px;
                    margin-left: 5px;
                    width: 12px;
                    background: url("/juju-ui/assets/images/chevron_down.png") no-repeat;
                }
            }

            .closed-unit-list .chevron {
                background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
            }

            .status-unit-header.error {
                background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
            }
            .status-unit-header.running {
                background-image: url("/juju-ui/assets/images/inspector-charm-running.png");
            }
            .status-unit-header.pending {
                background-image: url("/juju-ui/assets/images/inspector-charm-pending.png");
            }

            .status-unit-content {
                -moz-transition: .3s, max-height .3s;
                -webkit-transition: .25s, max-height .3s;
                transition: .3s, max-height .3s;
                overflow: hidden;
                background: @charm-panel-background-color;
                /*
                 * The height of each list is 35px so setting this to help the auto max height script.
                 */
                font-size: 35px;
                /* max height is being set inline in views/service.js.
                It is calculated on the number of units in the list.  */

                &.close-unit {
                    max-height: 0px !important;
                }

                a {
                    cursor: pointer;
                    color: @text-colour;
                    text-decoration: underline;
                }

                ul {
                    margin-left: 0;
                    border-bottom: 1px solid @charm-panel-border-color;
                }

                li {
                    list-style-type: none;
                    padding: 7px 0 7px 10px;
                    border-top: 1px solid @inspector-status-border-color;
                    font-size: 13px;
                }

                input[type="checkbox"] {
                    margin-right: 30px;
                }

                button.unit-action-button,
                input[type="checkbox"] {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    background: @charm-panel-series-color;
                }

                button.unit-action-button {
                    border: 0;
                    padding: 5px;
                    width: 70px;
                    text-align: center;
                    margin: 20px 3px 0;
                }
                button.resolve {
                    margin-left: 25px;
                }
            }

            .status-unit-content.running ul li {
                background: url("/juju-ui/assets/images/inspector-charm-running.png") no-repeat scroll 35px center;
            }
            .status-unit-content.pending ul li {
                background: url("/juju-ui/assets/images/inspector-charm-pending-list.png") no-repeat scroll 35px center;
            }
            .status-unit-content.error ul li {
                background: url("/juju-ui/assets/images/inspector-charm-error.png") no-repeat scroll 35px center;
            }
        }

    }

}

@inspector-background-color: #221e1c;
@inspector-region-background-color: #282828;
@inspector-divider-bottom: rgba(0, 0, 0, 0.3);
@inspector-divider-top: rgba(255, 255, 255, 0.05);
@inspector-status-border-color: #E2E2E2;
@inspector-subtitle-color: #555555;
@confirm-button-color: #DD4814;
@disabled-input-background-color: #727272;
@disabled-input-text-color: #252525;

.yui3-juju-inspector {
    .customize-scrollbar;

    .left-breakout {
        .type9;
        position: absolute;
        top: 20px;
        bottom: @navbar-bottom-height + 20px;
        right: 327px;
        overflow-y: auto;
        overflow-x: hidden;
        width: @bws-panel-width;
        background-color: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

        .close-slot {
            position: absolute;
            // Need to raise it above the content.
            z-index: 1;
            display: block;
            top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            background: transparent
                url(/juju-ui/assets/images/panel_close.png)
                left top no-repeat;
        }
        .charm .yui3-tabview {
            margin-top: 30px;
        }
        .unit-overview {
            .header {
                .type13;
                padding: 30px;
                background-color: @bws-background;
                border-bottom: 1px solid @bws-border;

                h2 {
                    .type2;
                    margin-bottom: 20px;
                }
                ul {
                    margin: 0;
                    list-style: none;

                    li {
                        line-height: 1.55;
                    }
                }
            }
            .unit-info-tabs {
                padding: 30px;

                h3 {
                    .type5;
                    margin-bottom: 20px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid @bws-border;
                }
                tr {
                    border-bottom: 1px solid @bws-border;

                    th,
                    td {
                        padding: 10px 20px;
                    }
                    th {
                        .type5;
                        text-align: left;
                        padding-top: 0;
                        padding-bottom: 15px;
                    }
                }
            }
        }
    }

    .juju-inspector {
        .create-border-radius(@border-radius);
        position: absolute;
        top: 20px;
        bottom: @navbar-bottom-height + 20px;
        right: 35px;
        width: 292px;
        min-height: 250px;
        border: 0;
        background-color: @inspector-background-color;
        color: #fff;
        /* Can be removed once the old inspector styles are removed. */
        margin: 0;

        h1, h2, h3, h4, h5, h6 {
            background-color: @inspector-region-background-color;
            padding-left: 1em;
        }

        input[type=checkbox].hidden-checkbox {
            display: none;
        }
        .toggle {
            font-size: 12px;

            span {
                display: inline-block;
                vertical-align: top;
                line-height: 30px;
            }
            .toggle-switch {
                display: inline-block;
                vertical-align: top;
                float: right;

                label {
                    height: 26px;
                    width: 50px;
                    background-color: @inspector-background-color;
                    .create-border-radius(@border-radius);
                    display: block;
                    position: relative;
                    margin: 0;

                    &.light {
                        background-color: @inspector-region-background-color;
                    }
                    .handle {
                        height: 18px;
                        width: 18px;
                        background-color: @confirm-button-color;
                        .create-border-radius(@border-radius);
                        position: absolute;
                        margin: 4px;
                        cursor: pointer;
                        text-align: center;
                        left: 0;
                        -moz-transition: left .1s ease-in-out;
                        -webkit-transition: left .1s ease-in-out;
                        transition: left .1s ease-in-out;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                    .handle:before {
                        content: '\2717';
                    }
                }
                input.hidden-checkbox:checked ~ label .handle {
                    left: 25px;
                }
                input.hidden-checkbox:checked ~ label .handle:before {
                    content: '\2713';
                }
            }
        }
        .controls {

            button {
                .create-border-radius(@border-radius);
                width: 130px;
                height: 25px;
                margin: 10px 0;
                border: none;
                color: white;
                font-weight: bold;

                &.cancel {
                    background-color: #A3A3A3;
                    margin-left: 10px;
                }

                &.confirm {
                    background-color: @confirm-button-color;
                    float: right;
                    margin-right: 10px;
                    &:disabled {
                        background-color: #802E0E;
                        color: #eee;
                    }
                }
            }
        }

        .settings-wrapper {
            position: relative;
            width: 268px;

            label {
                font-size: 14px;
                margin: 14px 0 7px 0;
                font-weight: bold;
            }

            textarea {
                width: 260px;
            }

            .settings-description {
                font-style: italic;
                font-size: 12px;

                /* below hyphenation code was taken from:
                http://www.newnet-soft.com/blog/csstypography */
                -ms-word-break: break-all;
                word-break: break-all;

                // Non standard for webkit
                word-break: break-word;

                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                hyphens: auto;

                -webkit-hyphenate-before: 2;
                -webkit-hyphenate-after: 3;
                hyphenate-lines: 3;
            }

            .warning-message {
                color: red;
                padding: 1em;
            }
            .conflicted {
                position: absolute;
                border: 1px solid grey;
                margin-top: -140px;
                background-color: white;
            }
        }

        .config-file {
            padding: 10px 5px 10px 5px;

            input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                z-index: 0;
            }

            .fakebutton {
                .create-border-radius(@border-radius);
                font-family: @font-family-medium;
                border: 1px solid #6B6B6B;
                color: white;
                font-size: 14px;
                font-weight: bold;
                padding: 5px;
                z-index: 2;
                cursor: pointer;
            }
        }

        .ghost {
            .header-slot {
                header {
                    margin-bottom: 0;
                    border-bottom: none;
                }
            }
            .ghost-config-header {
                font-size: 17px;
                height: 35px;
                line-height: 35px;
                padding-left: 35px;
            }
            .ghost-config-content {
                padding: 15px 10px;
                background-color: @inspector-region-background-color;

                input[name=number-units] {
                    display: inline-block;
                    width: 120px;
                    margin-bottom: 0;
                }
                label[for=number-units] {
                    display: inline-block;
                    margin-left: 25px;
                    vertical-align: middle;
                }
                &.use-defaults {
                    textarea {
                        background-color: @disabled-input-background-color;
                        border-color: @inspector-background-color;
                        cursor: not-allowed;
                        color: @disabled-input-text-color;
                    }
                    input[type=text] {
                        background-color: @disabled-input-background-color;
                        border-color: @inspector-background-color;
                        cursor: not-allowed;
                        color: @disabled-input-text-color;
                    }
                    .fakebutton {
                        color: @disabled-input-background-color;
                        border-color: @disabled-input-background-color;
                        cursor: default;
                    }
                }
            }
        }

        /* Resetting panel styles. Can be removed after old inspector styles are
           removed. */
        .charm-panel-configure {
            background: transparent;
            float: none;
            border: 0;
            height: auto;
            width: auto;
            padding: 0 20px;

            .title {
                font-size: 20px;
                font-weight: 300;
                line-height: 1.2;
                margin: 0;
            }
            .name {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
            }
        }

        .control-description,
        .control-label {
            font-size: 14px;
            font-weight: 300;
        }
        .control-label {
            margin-bottom: 10px;
        }

        .control-group {
            margin: 0;
            padding: 20px;
            border-bottom: 1px solid @inspector-divider-bottom;
            border-top: 1px solid @inspector-divider-top;

            .well {
                background-color: transparent;
                border: 0;
                margin-bottom: 10px;
                min-height: 20px;
                padding: 0;
            }
        }

        .viewlet-container {
            overflow-y: auto;
            border-top: 1px solid @inspector-divider-top;
            /* overwritten by the recalculateHeight() method in
               viewlet-manager.js. Important to avoid flash of incorrectly
               calculated height */
            max-height: 250px;
        }

        .content {
            margin: 1em;
        }

        .header-slot {
            header {
                background-color: @inspector-region-background-color;
                border-bottom: 1px solid #1C1817;
                padding: 15px;
                margin-bottom: 6px;

                .service-charm {
                    color: @charm-panel-background-color;
                    width: 100%;

                    .service-name {
                        font-size: 20px;
                        font-weight: 300;
                        line-height: 1.2;
                    }
                    input.service-name {
                        width: 125px;
                    }
                    .charm-icon {
                        width: 64px;
                        height: 64px;
                        margin-right: 1em;
                        background: transparent url(/juju-ui/assets/images/charm_64.png) left top no-repeat;
                        img {
                            /* bootstrap sets this to middle */
                            vertical-align: baseline;
                        }
                    }
                    .details-wrapper {
                        width: 135px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .charm-url {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.3;
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .close {
                        /* required to overwrite bootstrap styles */
                        text-shadow: none;
                        color: #cbcbcb;
                        font-weight: normal;
                        opacity: 1;
                        font-size: 30px;
                        /* not overwriting */
                        vertical-align: top;
                    }
                    div {
                        display: inline-block;
                    }
                }
            }
        }

        .viewlet-manager-navigation {
            margin: 0;
            padding-left: 65px;
            background-color: @inspector-region-background-color;

            li {
                display: inline-block;
                margin-right: 40px;

                &:last-child {
                    margin-right: 0;
                }
                a {
                    .border-box;
                    display: block;
                    height: 50px;
                    padding-top: 13px;

                    &:hover {
                        text-decoration: none;
                    }
                    &.active {
                        border-bottom: 2px solid @charm-panel-orange;

                        .normal {
                            display: none;
                        }
                        .selected {
                            display: inline-block;
                        }
                    }
                    .selected {
                        display: none;
                    }
                }
            }
        }

        .viewlet-manager-footer {
            position: relative;
        }

        .view-container {
            border-top: 1px solid @inspector-divider-top;
            overflow: auto;

            h2 {
                font-size: 18px;
                padding-left: 0;
            }

            .toggle-settings-help {
                padding: 0 20px 20px;
                cursor: pointer;
            }

            .settings-wrapper {
                position: relative;
                padding: 0 10px;

                label {
                    font-size: 14px;
                    margin: 14px 0 7px 0;
                    font-weight: bold;
                }

                .settings-description {
                    font-style: italic;
                    font-size: 12px;
                    text-align: justify;
                }

                .warning-message {
                    color: red;
                    padding: 1em;
                }
                .conflicted {
                    position: absolute;
                    border: 1px solid grey;
                    margin-top: -140px;
                    background-color: white;
                }
            }
            .toggle {
                padding: 10px;

                label {
                   margin: 0;
                }
            }

        }

        .status {
            display: inline-block;
            width: 33%;
            text-align: center;
            &.running {
                background-color: #00b711;
            }
            &.pending {
                background-color: #ede837;
            }
            &.error {
                background-color: #ba0000;
            }
        }
        .destroy-service-trigger{
            padding-left: 10px;
            height: 30px;

            span {
                font-size: 11px;
                font-weight: bold;
                cursor: pointer;
            }
        }

        .destroy-service-prompt {
            overflow: hidden;
            height: 95px;
            background-color: @inspector-region-background-color;
            -moz-transition: .3s, height .3s;
            -webkit-transition: .25s, height .3s;
            transition: .3s, height .3s;
            position: absolute;
            bottom: 0;

            .message {
                margin: 5px 15px;
            }

            .buttons {
                a {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    box-shadow: 0 2px 2px -2px #777777 inset;
                    color: #fff;
                    background: #dd4814;
                    padding: 5px 0;
                    text-decoration: none;
                    text-align: center;
                    margin-top: 10px;
                    width: 110px;
                    float: left;
                    margin-left: 13px;
                }

                a:last-of-type {
                    mergin-right: 0;
                }

                .grey {
                    background: #999;
                }
            }
        }

        .destroy-service-prompt.closed {
            height: 0;
        }

        .viewlet-wrapper{
            h3, h2, legend {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                padding: 10px 20px;
                color: @charm-panel-configure-title-color;
                margin-bottom: 0;
                width: auto;
            }

            .content {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                margin: 0;
                padding: 10px;
            }
        }

        .overview-unit-list {
            margin-left: 0;

            .action-button-wrapper {
                height: 50px;
            }

            .status-unit-header {
                background-color: @inspector-region-background-color;
                padding: 15px 15px 15px 40px;
                font-size: 14px;
                cursor: pointer;
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                background-position: 20px center;
                background-repeat: no-repeat;
                span {
                    margin-right: 5px;
                }

                ul {
                    background: white;
                }

                .chevron {
                    display: inline-block;
                    height: 9px;
                    margin-left: 5px;
                    width: 12px;
                    background: url("/juju-ui/assets/images/chevron_down.png") no-repeat;
                }
            }

            .closed-unit-list .chevron {
                background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
            }

            .status-unit-header.error {
                background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
            }
            .status-unit-header.running {
                background-image: url("/juju-ui/assets/images/inspector-charm-running.png");
            }
            .status-unit-header.pending {
                background-image: url("/juju-ui/assets/images/inspector-charm-pending.png");
            }

            .status-unit-content {
                -moz-transition: .3s, max-height .3s;
                -webkit-transition: .25s, max-height .3s;
                transition: .3s, max-height .3s;
                overflow: hidden;
                background: @charm-panel-background-color;
                /*
                 * The height of each list is 35px so setting this to help the auto max height script.
                 */
                font-size: 35px;
                /* max height is being set inline in views/service.js.
                It is calculated on the number of units in the list.  */

                &.close-unit {
                    max-height: 0px !important;
                }

                a {
                    cursor: pointer;
                    color: @text-colour;
                    text-decoration: underline;
                }

                ul {
                    margin-left: 0;
                    border-bottom: 1px solid @charm-panel-border-color;
                }

                li {
                    list-style-type: none;
                    padding: 7px 0 7px 10px;
                    border-top: 1px solid @inspector-status-border-color;
                    font-size: 13px;
                }

                input[type="checkbox"] {
                    margin-right: 30px;
                }

                button.unit-action-button,
                input[type="checkbox"] {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    background: @charm-panel-series-color;
                }

                button.unit-action-button {
                    border: 0;
                    padding: 5px;
                    width: 70px;
                    text-align: center;
                    margin: 20px 3px 0;
                }
                button.resolve {
                    margin-left: 25px;
                }
            }

            .status-unit-content.running ul li {
                background: url("/juju-ui/assets/images/inspector-charm-running.png") no-repeat scroll 35px center;
            }
            .status-unit-content.pending ul li {
                background: url("/juju-ui/assets/images/inspector-charm-pending-list.png") no-repeat scroll 35px center;
            }
            .status-unit-content.error ul li {
                background: url("/juju-ui/assets/images/inspector-charm-error.png") no-repeat scroll 35px center;
            }
        }

    }

}


Light Theme

Light Theme

Update Light Theme Design

fatal: unable to access 'https://github.com/APE-EDX/APE.git/': The requested URL returned error: 403


Update main.less

Update main.less

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


Fixing animations

Fixing animations

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


Add responsive styles so the toolbar is still usable at smaller widths

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/mhd753/page-ruler.git/'


Workout template: adaptive pixel pushing.

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/nikitakuz/cleanlifts.git/'


Fix white space

Fix white space

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


feat(style): smaller margin space for image post title

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

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

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

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

  &:after {
    clear: both;
  }
}

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

body {
  padding: 0 16% 16vmin;
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;

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

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

.sub-heading {
  font-family: @sans-serif;
  font-size: (1em / 1.4);
  font-weight: normal;
  letter-spacing: .08em;
  opacity: .5;
}

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

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

// Reset comment elements
a, button {

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

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

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

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

// Main site logo
.logo {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0 0 1.4vmin;
  background: @link-color;
  opacity: 0;
  transition: background .3s ease;

  &:hover,
  &:focus {
    border-bottom: none !important;
    background: @text-color;
  }

  h1 {
    height: 0;
    text-indent: -99999em;
  }
}

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

// Main navigation
.navigation { // nav.navigation
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: .5em;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

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

    a {
      padding: 3px 1.2em;

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

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

  a {
    color: @link-color;
  }
}

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

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

// Pserson status
.status { // h2.status
  margin: 10px 0 0;
  font-size: .75em;
  font-weight: bold;

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

.available {

  &:before {
    background: green;
  }

  a {
    color: green;
  }
}

.unavailable {

  &:before {
    background: red;
  }

  a {
    color: red;
  }
}

// Article wrapper
article {
  margin-bottom: 16vmin;
  .cf; // For some specified posts in work category

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

  header {
    padding-bottom: 16vmin;

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

      // Override margin from article img
      img {
        margin-bottom: .3em;
      }
    }

    h1 {
      .heading;
    }

    .latest-post {
      margin-top: 16vmin;
      font-size: .8em;
      font-weight: normal;
      line-height: 1.2;

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin: 20px 0 0;
      letter-spacing: .1em;
    }

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

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

  a {
    font-weight: bold;
  }

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

  h3 {
    margin: 10vmin 0 1em;
    .sub-heading;
  }

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

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

  ol {
    margin-left: 1.75em;
  }

  blockquote {
    position: relative;
    margin-bottom: 2em;

    > p {
      padding-left: .8em;
      border-left: 2px solid;
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-size: 85%;
      font-style: normal;
      color: fade(@text-color, 80%);

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

  sup {
    font-size: 75%;
  }

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

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

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

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

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

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

    &:focus:required:invalid {

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

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

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

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

// Tweet button margin fix
.tweet {
  margin-top: 10vmin;
}

// Largetype styles (replaces button styles)
.largetype {
  .heading;
  font-size: (1em / .5);
}

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

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

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

// Special paragraph with an icon
.note,
.store,
.download {
  padding-left: .8em;
  border-left: 2px solid @link-color;
}

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

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

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

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

  li {
    margin: 0 0 1.4vmin;

    h2 {
      .heading;

      time {
        font-size: 75%; // Avoid em unit here, it causes font size double caculating from parents node.
        color: fade(@text-color, 30%);
        opacity: 0;
        transition: opacity .5s ease;
      }

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

      .external {
        padding: 0 .2em;

        span {
          display: inline-block;
          width: 14px;
        }

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

    h2 {
      font-size: 2em;
      line-height: 1.2;
    }

    .txt {
      margin: 2vmin 0 10vmin;
    }

    &:hover,
    &:focus {

      h2 {

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

  &:last-child {

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

      .txt {
        margin-bottom: 0; // Post list margin fix for Jekyll Scaffolding
      }
    }
  }
}

.footer {
  font-size: (1em / 1.4);
  text-transform: lowercase;

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 4px;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

        &:after {
          content: none;
        }
      }
    }
  }
}

// FlexSlider necessary styles
.flexslider {

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

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

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

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

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

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

@media (max-width: 640px) {
  body {
    padding-left: 4%;
    padding-right: 4%;
    font-size: (@base-font-size * 2);
  }

  .list {

    li {

      h2 {

        time {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 400px) {
  body {
    font-size: (@base-font-size * 2.8);
  }
}

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

// Import custom styles
@import "custom";

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

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

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

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

  &:after {
    clear: both;
  }
}

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

body {
  padding: 0 16% 16vmin;
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;

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

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

.sub-heading {
  font-family: @sans-serif;
  font-size: (1em / 1.4);
  font-weight: normal;
  letter-spacing: .08em;
  opacity: .5;
}

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

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

// Reset comment elements
a, button {

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

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

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

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

// Main site logo
.logo {
  display: block;
  width: 100%;
  height: 8px;
  margin: 0 0 1.4vmin;
  background: @link-color;
  opacity: 0;
  transition: background .3s ease;

  &:hover,
  &:focus {
    border-bottom: none !important;
    background: @text-color;
  }

  h1 {
    height: 0;
    text-indent: -99999em;
  }
}

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

// Main navigation
.navigation { // nav.navigation
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: .5em;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

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

    a {
      padding: 3px 1.2em;

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

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

  a {
    color: @link-color;
  }
}

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

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

// Pserson status
.status { // h2.status
  margin: 10px 0 0;
  font-size: .75em;
  font-weight: bold;

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

.available {

  &:before {
    background: green;
  }

  a {
    color: green;
  }
}

.unavailable {

  &:before {
    background: red;
  }

  a {
    color: red;
  }
}

// Article wrapper
article {
  margin-bottom: 16vmin;
  .cf; // For some specified posts in work category

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

  header {
    padding-bottom: 16vmin;

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

      // Override margin from article img
      img {
        margin-bottom: .6em;
      }
    }

    h1 {
      .heading;
    }

    .latest-post {
      margin-top: 16vmin;
      font-size: .8em;
      font-weight: normal;
      line-height: 1.2;

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin: 20px 0 0;
      letter-spacing: .1em;
    }

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

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

  a {
    font-weight: bold;
  }

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

  h3 {
    margin: 10vmin 0 1em;
    .sub-heading;
  }

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

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

  ol {
    margin-left: 1.75em;
  }

  blockquote {
    position: relative;
    margin-bottom: 2em;

    > p {
      padding-left: .8em;
      border-left: 2px solid;
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-size: 85%;
      font-style: normal;
      color: fade(@text-color, 80%);

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

  sup {
    font-size: 75%;
  }

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

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

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

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

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

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

    &:focus:required:invalid {

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

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

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

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

// Tweet button margin fix
.tweet {
  margin-top: 10vmin;
}

// Largetype styles (replaces button styles)
.largetype {
  .heading;
  font-size: (1em / .5);
}

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

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

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

// Special paragraph with an icon
.note,
.store,
.download {
  padding-left: .8em;
  border-left: 2px solid @link-color;
}

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

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

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

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

  li {
    margin: 0 0 1.4vmin;

    h2 {
      .heading;

      time {
        font-size: 75%; // Avoid em unit here, it causes font size double caculating from parents node.
        color: fade(@text-color, 30%);
        opacity: 0;
        transition: opacity .5s ease;
      }

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

      .external {
        padding: 0 .2em;

        span {
          display: inline-block;
          width: 14px;
        }

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

    h2 {
      font-size: 2em;
      line-height: 1.2;
    }

    .txt {
      margin: 2vmin 0 10vmin;
    }

    &:hover,
    &:focus {

      h2 {

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

  &:last-child {

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

      .txt {
        margin-bottom: 0; // Post list margin fix for Jekyll Scaffolding
      }
    }
  }
}

.footer {
  font-size: (1em / 1.4);
  text-transform: lowercase;

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 4px;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

        &:after {
          content: none;
        }
      }
    }
  }
}

// FlexSlider necessary styles
.flexslider {

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

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

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

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

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

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

@media (max-width: 640px) {
  body {
    padding-left: 4%;
    padding-right: 4%;
    font-size: (@base-font-size * 2);
  }

  .list {

    li {

      h2 {

        time {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 400px) {
  body {
    font-size: (@base-font-size * 2.8);
  }
}

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

// Import custom styles
@import "custom";


edit layout.less

edit layout.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/sakkatos/inventory.git/'


moved related code

moved related code

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


Force change in css

Force change in css

@import "../../bower_components/bootstrap/less/bootstrap.less";
@import "colors.less";
@import "btn.less";
@import "fonts.less";
@import "text-align.less";
@import "layout.less";
@import "home.less";
@import "pricing.less";
@import "pygments.less";
@import "shell.less";
@import "community-nav.less";
@import "carousel.less";
@import "side-nav.less";
@import "ribbon.less";
@import "school.less";
@import "blog.less";
@import "asciidoc.less";
@import (less) "../../bower_components/slick-carousel/slick/slick-theme.css";
@import (less) "../../bower_components/slick-carousel/slick/slick.css";

p {
  margin: 0 0 @line-height-computed;
}

.lead {
	font-size: 18px;
	font-weight: 400;
}

.section-heading {
  margin-bottom: 30px;
}

.intro-header-training, .intro-header-school {
	padding-top: 0; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
	padding-bottom: 0;
	text-align: center;
}

.intro-header-training {
	background: url(/images/cukeup-2014/CukeUp-7477.jpg) no-repeat center center;
	background-size: cover;
}

.intro-header-school {
  background: url(/images/cukeup-2014/CukeUp-7459.jpg) no-repeat center center;
  background-size: cover;
}

.intro-message {
	position: relative;
	padding-top: 8%;
	padding-bottom: 8%;
	color: @body-bg;

  .ribbon {
    position: absolute;
    font-size: 22px;
  }
}

.intro-message h1 {
	margin: 0;
	font-size: 90px;
}

.intro-message h2 {
	font-size: 30px;
}

@media (max-width: @screen-sm) {
  .intro-message {
    h1 {
      font-size: 40px;
    }

    h2 {
      font-size: 20px;
    }

    .ribbon {
      font-size: 16px;
      right: 3px;
      top: 10px;
    }
  }
}

.content-section-a {
	background-color: @gray-light;
	padding: 50px 0;
}

.content-section-b {
	border-top: 1px solid @gray-lighter;
	border-bottom: 1px solid @gray-lighter;
	padding: 50px 0;
}

ul.benefits {
  li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
}

a[name="buy"] {
  height: 50px;
  display: block;
}

table.table td:nth-child(4) {
  text-align: right;
}


OR-1539 Support flex for Safari

OR-1539 Support flex for Safari

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/heroandtn3/openpaas-esn.git/'


Adding styles

Adding styles

Needs to be converted to either inline or JSS styles

@octicons-font-path: "https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0";
@octicons-version:   "396334ee3da78f4302d25c758ae3e3ce5dc3c97d";

@font-face {
  font-family: 'octicons';
  src: ~"url('@{octicons-font-path}/octicons.eot?#iefix&v=@{octicons-version}') format('embedded-opentype')",
       ~"url('@{octicons-font-path}/octicons.woff?v=@{octicons-version}') format('woff')",
       ~"url('@{octicons-font-path}/octicons.ttf?v=@{octicons-version}') format('truetype')",
       ~"url('@{octicons-font-path}/octicons.svg?v=@{octicons-version}#octicons') format('svg')";
  font-weight: normal;
  font-style: normal;
}

// .octicon is optimized for 16px.
// .mega-octicon is optimized for 32px but can be used larger.
.octicon, .mega-octicon {
  font: normal normal normal 16px/1 octicons;
  display: inline-block;
  text-decoration: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mega-octicon { font-size: 32px; }

.octicon-alert:before { content: '\f02d'} /*  */
.octicon-arrow-down:before { content: '\f03f'} /*  */
.octicon-arrow-left:before { content: '\f040'} /*  */
.octicon-arrow-right:before { content: '\f03e'} /*  */
.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
.octicon-arrow-small-right:before { content: '\f071'} /*  */
.octicon-arrow-small-up:before { content: '\f09f'} /*  */
.octicon-arrow-up:before { content: '\f03d'} /*  */
.octicon-microscope:before,
.octicon-beaker:before { content: '\f0dd'} /*  */
.octicon-bell:before { content: '\f0de'} /*  */
.octicon-book:before { content: '\f007'} /*  */
.octicon-bookmark:before { content: '\f07b'} /*  */
.octicon-briefcase:before { content: '\f0d3'} /*  */
.octicon-broadcast:before { content: '\f048'} /*  */
.octicon-browser:before { content: '\f0c5'} /*  */
.octicon-bug:before { content: '\f091'} /*  */
.octicon-calendar:before { content: '\f068'} /*  */
.octicon-check:before { content: '\f03a'} /*  */
.octicon-checklist:before { content: '\f076'} /*  */
.octicon-chevron-down:before { content: '\f0a3'} /*  */
.octicon-chevron-left:before { content: '\f0a4'} /*  */
.octicon-chevron-right:before { content: '\f078'} /*  */
.octicon-chevron-up:before { content: '\f0a2'} /*  */
.octicon-circle-slash:before { content: '\f084'} /*  */
.octicon-circuit-board:before { content: '\f0d6'} /*  */
.octicon-clippy:before { content: '\f035'} /*  */
.octicon-clock:before { content: '\f046'} /*  */
.octicon-cloud-download:before { content: '\f00b'} /*  */
.octicon-cloud-upload:before { content: '\f00c'} /*  */
.octicon-code:before { content: '\f05f'} /*  */
.octicon-color-mode:before { content: '\f065'} /*  */
.octicon-comment-add:before,
.octicon-comment:before { content: '\f02b'} /*  */
.octicon-comment-discussion:before { content: '\f04f'} /*  */
.octicon-credit-card:before { content: '\f045'} /*  */
.octicon-dash:before { content: '\f0ca'} /*  */
.octicon-dashboard:before { content: '\f07d'} /*  */
.octicon-database:before { content: '\f096'} /*  */
.octicon-clone:before,
.octicon-desktop-download:before { content: '\f0dc'} /*  */
.octicon-device-camera:before { content: '\f056'} /*  */
.octicon-device-camera-video:before { content: '\f057'} /*  */
.octicon-device-desktop:before { content: '\f27c'} /*  */
.octicon-device-mobile:before { content: '\f038'} /*  */
.octicon-diff:before { content: '\f04d'} /*  */
.octicon-diff-added:before { content: '\f06b'} /*  */
.octicon-diff-ignored:before { content: '\f099'} /*  */
.octicon-diff-modified:before { content: '\f06d'} /*  */
.octicon-diff-removed:before { content: '\f06c'} /*  */
.octicon-diff-renamed:before { content: '\f06e'} /*  */
.octicon-ellipsis:before { content: '\f09a'} /*  */
.octicon-eye-unwatch:before,
.octicon-eye-watch:before,
.octicon-eye:before { content: '\f04e'} /*  */
.octicon-file-binary:before { content: '\f094'} /*  */
.octicon-file-code:before { content: '\f010'} /*  */
.octicon-file-directory:before { content: '\f016'} /*  */
.octicon-file-media:before { content: '\f012'} /*  */
.octicon-file-pdf:before { content: '\f014'} /*  */
.octicon-file-submodule:before { content: '\f017'} /*  */
.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
.octicon-file-text:before { content: '\f011'} /*  */
.octicon-file-zip:before { content: '\f013'} /*  */
.octicon-flame:before { content: '\f0d2'} /*  */
.octicon-fold:before { content: '\f0cc'} /*  */
.octicon-gear:before { content: '\f02f'} /*  */
.octicon-gift:before { content: '\f042'} /*  */
.octicon-gist:before { content: '\f00e'} /*  */
.octicon-gist-secret:before { content: '\f08c'} /*  */
.octicon-git-branch-create:before,
.octicon-git-branch-delete:before,
.octicon-git-branch:before { content: '\f020'} /*  */
.octicon-git-commit:before { content: '\f01f'} /*  */
.octicon-git-compare:before { content: '\f0ac'} /*  */
.octicon-git-merge:before { content: '\f023'} /*  */
.octicon-git-pull-request-abandoned:before,
.octicon-git-pull-request:before { content: '\f009'} /*  */
.octicon-globe:before { content: '\f0b6'} /*  */
.octicon-graph:before { content: '\f043'} /*  */
.octicon-heart:before { content: '\2665'} /* ♥ */
.octicon-history:before { content: '\f07e'} /*  */
.octicon-home:before { content: '\f08d'} /*  */
.octicon-horizontal-rule:before { content: '\f070'} /*  */
.octicon-hubot:before { content: '\f09d'} /*  */
.octicon-inbox:before { content: '\f0cf'} /*  */
.octicon-info:before { content: '\f059'} /*  */
.octicon-issue-closed:before { content: '\f028'} /*  */
.octicon-issue-opened:before { content: '\f026'} /*  */
.octicon-issue-reopened:before { content: '\f027'} /*  */
.octicon-jersey:before { content: '\f019'} /*  */
.octicon-key:before { content: '\f049'} /*  */
.octicon-keyboard:before { content: '\f00d'} /*  */
.octicon-law:before { content: '\f0d8'} /*  */
.octicon-light-bulb:before { content: '\f000'} /*  */
.octicon-link:before { content: '\f05c'} /*  */
.octicon-link-external:before { content: '\f07f'} /*  */
.octicon-list-ordered:before { content: '\f062'} /*  */
.octicon-list-unordered:before { content: '\f061'} /*  */
.octicon-location:before { content: '\f060'} /*  */
.octicon-gist-private:before,
.octicon-mirror-private:before,
.octicon-git-fork-private:before,
.octicon-lock:before { content: '\f06a'} /*  */
.octicon-logo-github:before { content: '\f092'} /*  */
.octicon-mail:before { content: '\f03b'} /*  */
.octicon-mail-read:before { content: '\f03c'} /*  */
.octicon-mail-reply:before { content: '\f051'} /*  */
.octicon-mark-github:before { content: '\f00a'} /*  */
.octicon-markdown:before { content: '\f0c9'} /*  */
.octicon-megaphone:before { content: '\f077'} /*  */
.octicon-mention:before { content: '\f0be'} /*  */
.octicon-milestone:before { content: '\f075'} /*  */
.octicon-mirror-public:before,
.octicon-mirror:before { content: '\f024'} /*  */
.octicon-mortar-board:before { content: '\f0d7'} /*  */
.octicon-mute:before { content: '\f080'} /*  */
.octicon-no-newline:before { content: '\f09c'} /*  */
.octicon-octoface:before { content: '\f008'} /*  */
.octicon-organization:before { content: '\f037'} /*  */
.octicon-package:before { content: '\f0c4'} /*  */
.octicon-paintcan:before { content: '\f0d1'} /*  */
.octicon-pencil:before { content: '\f058'} /*  */
.octicon-person-add:before,
.octicon-person-follow:before,
.octicon-person:before { content: '\f018'} /*  */
.octicon-pin:before { content: '\f041'} /*  */
.octicon-plug:before { content: '\f0d4'} /*  */
.octicon-repo-create:before,
.octicon-gist-new:before,
.octicon-file-directory-create:before,
.octicon-file-add:before,
.octicon-plus:before { content: '\f05d'} /*  */
.octicon-primitive-dot:before { content: '\f052'} /*  */
.octicon-primitive-square:before { content: '\f053'} /*  */
.octicon-pulse:before { content: '\f085'} /*  */
.octicon-question:before { content: '\f02c'} /*  */
.octicon-quote:before { content: '\f063'} /*  */
.octicon-radio-tower:before { content: '\f030'} /*  */
.octicon-repo-delete:before,
.octicon-repo:before { content: '\f001'} /*  */
.octicon-repo-clone:before { content: '\f04c'} /*  */
.octicon-repo-force-push:before { content: '\f04a'} /*  */
.octicon-gist-fork:before,
.octicon-repo-forked:before { content: '\f002'} /*  */
.octicon-repo-pull:before { content: '\f006'} /*  */
.octicon-repo-push:before { content: '\f005'} /*  */
.octicon-rocket:before { content: '\f033'} /*  */
.octicon-rss:before { content: '\f034'} /*  */
.octicon-ruby:before { content: '\f047'} /*  */
.octicon-screen-full:before { content: '\f066'} /*  */
.octicon-screen-normal:before { content: '\f067'} /*  */
.octicon-search-save:before,
.octicon-search:before { content: '\f02e'} /*  */
.octicon-server:before { content: '\f097'} /*  */
.octicon-settings:before { content: '\f07c'} /*  */
.octicon-shield:before { content: '\f0e1'} /*  */
.octicon-log-in:before,
.octicon-sign-in:before { content: '\f036'} /*  */
.octicon-log-out:before,
.octicon-sign-out:before { content: '\f032'} /*  */
.octicon-squirrel:before { content: '\f0b2'} /*  */
.octicon-star-add:before,
.octicon-star-delete:before,
.octicon-star:before { content: '\f02a'} /*  */
.octicon-stop:before { content: '\f08f'} /*  */
.octicon-repo-sync:before,
.octicon-sync:before { content: '\f087'} /*  */
.octicon-tag-remove:before,
.octicon-tag-add:before,
.octicon-tag:before { content: '\f015'} /*  */
.octicon-telescope:before { content: '\f088'} /*  */
.octicon-terminal:before { content: '\f0c8'} /*  */
.octicon-three-bars:before { content: '\f05e'} /*  */
.octicon-thumbsdown:before { content: '\f0db'} /*  */
.octicon-thumbsup:before { content: '\f0da'} /*  */
.octicon-tools:before { content: '\f031'} /*  */
.octicon-trashcan:before { content: '\f0d0'} /*  */
.octicon-triangle-down:before { content: '\f05b'} /*  */
.octicon-triangle-left:before { content: '\f044'} /*  */
.octicon-triangle-right:before { content: '\f05a'} /*  */
.octicon-triangle-up:before { content: '\f0aa'} /*  */
.octicon-unfold:before { content: '\f039'} /*  */
.octicon-unmute:before { content: '\f0ba'} /*  */
.octicon-versions:before { content: '\f064'} /*  */
.octicon-watch:before { content: '\f0e0'} /*  */
.octicon-remove-close:before,
.octicon-x:before { content: '\f081'} /*  */
.octicon-zap:before { content: '\26A1'} /* ⚡ */

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


more styling for topbar: logo, menu

more styling for topbar: logo, menu


[FIX] account: reconciliation widget: scrolling behaviour

In the old design, the widget container needs to take care of the
scrolling since it is not instanciated inside a oe-view-manager.
In the new design, the o_content takes care of scrolling so those CSS
rules are not required (and are even harmful, cropping popovers).

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


fix(type): Fix 'substandardText' mixin (#240)

fatal: unable to access 'https://github.com/seekinternational/seek-asia-style-guide.git/': The requested URL returned error: 403


check-in

check-in

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


Signed-off-by: Ge-yuan-jun <daydaygyj@gmail.com>

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/XUEJS/xue-project.git/'


LF-11783: Fix Collection Manager List bug in IE9

Removed IE8 fix. Causing black bg and text blurriness.

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


CONTACT-152 Fix drop up menu in accounts page

fatal: unable to access 'https://github.com/heroandtn3/openpaas-esn.git/': The requested URL returned error: 403


Added allosphere.less

Added allosphere.less

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


basic header styles

basic header styles

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


Create print.less

Create print.less

//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

@media print {

  * {
    text-shadow: none !important;
    color: #000 !important; // Black prints faster: h5bp.com/s
    background: transparent !important;
    box-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

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

  // Don't show links for images, or javascript/internal links
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; // h5bp.com/t
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
  // Once fixed, we can just straight up remove this.
  select {
    background: #fff !important;
  }

  // Bootstrap components
  .navbar {
    display: none;
  }
  .table {
    td,
    th {
      background-color: #fff !important;
    }
  }
  .btn,
  .dropup > .btn {
    > .caret {
      border-top-color: #000 !important;
    }
  }
  .label {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }
  .table-bordered {
    th,
    td {
      border: 1px solid #ddd !important;
    }
  }

}

error: pathspec 'static/app/components/bootstrap/css/less/print.less' did not match any file(s) known to git


Fix merge problem

Fix merge problem

fatal: unable to access 'https://github.com/bac/juju-gui.git/': The requested URL returned error: 403


Update grid column selector in responsive theme file from class^= to class*=

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/mattmilburn/javelin-bp.git/'


Truncate long dropdown menu items (e.g. tags in the sidebar)

ref #391

.Dropdown {
  position: relative;
}
.Dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindex-dropdown;
  display: none;
  min-width: 160px;
  padding: 8px 0;
  margin: 7px 0;
  background: @body-bg;
  border-radius: @border-radius;
  .box-shadow(0 2px 6px @shadow-color);
  list-style: none;
  text-align: left;
  color: @text-color;
  font-size: 13px;
  line-height: 1.5;

  .open & {
    display: block;
  }

  > li {
    > a, > button, > span {
      padding: 8px 15px;
      display: block;
      width: 100%;
      color: @text-color;
      border-radius: 0;
      border: 0;
      background: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .box-shadow(none);
      text-align: left;
      font-size: 13px;
      font-weight: normal;
      text-decoration: none;

      &.hasIcon {
        padding-left: 40px;
      }

      .Button-icon {
        float: left;
        margin-left: -25px;
        margin-top: 2px;
      }

      &.disabled {
        opacity: 0.4;
        background: none !important;
      }
    }
    > a, > button {
      &:hover {
        background: @control-bg;
      }
      &:focus {
        outline: none;
      }
    }
    &.active {
      > a, > button {
        background: @control-bg;
      }
    }
  }
}
.Dropdown-menu--top {
  top: auto;
  bottom: 100%;
}
.Dropdown-menu--right {
  left: auto;
  right: 0;
}
.Dropdown-header {
  padding: 10px 15px;
  color: @heading-color;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  margin-top: 8px;
  border-top: 1px solid @control-bg;
  white-space: nowrap;

  &:first-child {
    margin-top: -8px;
    border-top: 0;
  }
}
.Dropdown-separator {
  margin: 8px 0;
  background-color: @control-bg;
  height: 1px;
}

.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: (@zindex-dropdown - 10);
}

.Dropdown--split {
  .Dropdown-toggle .Button-icon {
    display: none;
  }
  .Dropdown-toggle .Button-caret {
    display: inline;
    margin: 0;
  }

  &.itemCount1 {
    .Button {
      border-radius: @border-radius !important;
    }
    .Dropdown-toggle {
      display: none;
    }
  }

  @media @tablet-up {
    .Dropdown-menu li:first-child {
      &, + li.Dropdown-separator {
        display: none;
      }
    }
  }
}

.Dropdown--expanded() {
  .Dropdown-toggle {
    display: none;
  }
  .Dropdown-menu {
    display: block;
    border: 0;
    width: auto;
    margin: 0;
    padding: 0;
    min-width: 0;
    float: none;
    position: static;
    background: none;
    .box-shadow(none);
  }
}

@media @phone {
  .Dropdown.open {
    z-index: @zindex-modal;
  }
  .Dropdown .Dropdown-menu {
    margin: 0;
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: 0;
    top: auto;
    padding: 0;
    padding-bottom: 40px !important;
    display: block;
    max-height: 70vh;
    border-radius: 0;
    .box-shadow(0 2px 6px @shadow-color);
    visibility: hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .translate3d(0, 70vh, 0);
    .transition-transform(~" 0.3s, visibility 0s 0.3s");

    > li {
      > a, > button {
        background: @body-bg;
        font-size: 16px;
        padding: 15px 20px;

        &.hasIcon {
          padding-left: 50px;
        }
        .Button-icon {
          font-size: 16px;
          margin-left: -30px;
        }
        &:hover {
          background: @control-bg;
        }
      }
    }
    > .active {
      > a, > button {
        &, &:hover {
          background: @primary-color !important;
          color: #fff !important;
        }
      }
    }
    .open& {
      -webkit-transform: none;
              transform: none;
      visibility: visible;
      transition-delay: 0s;
    }
  }
  .Dropdown-separator {
    margin: 0;
  }
  .dropdown-backdrop {
    background: fade(@secondary-color, 90%);
    opacity: 0;
    .transition(~"opacity 0.3s");
    .translate3d(0, 0, 0);

    .open & {
      opacity: 1;
    }
  }
}

.Dropdown {
  position: relative;
}
.Dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindex-dropdown;
  display: none;
  min-width: 160px;
  padding: 8px 0;
  margin: 7px 0;
  background: @body-bg;
  border-radius: @border-radius;
  .box-shadow(0 2px 6px @shadow-color);
  list-style: none;
  text-align: left;
  color: @text-color;
  font-size: 13px;
  line-height: 1.5;

  .open & {
    display: block;
  }

  > li {
    > a, > button, > span {
      padding: 8px 15px;
      display: block;
      width: 100%;
      color: @text-color;
      border-radius: 0;
      border: 0;
      background: none;
      white-space: nowrap;
      .box-shadow(none);
      text-align: left;
      font-size: 13px;
      font-weight: normal;
      text-decoration: none;

      &.hasIcon {
        padding-left: 40px;
      }

      .Button-icon {
        float: left;
        margin-left: -25px;
        margin-top: 2px;
      }

      &.disabled {
        opacity: 0.4;
        background: none !important;
      }
    }
    > a, > button {
      &:hover {
        background: @control-bg;
      }
      &:focus {
        outline: none;
      }
    }
    &.active {
      > a, > button {
        background: @control-bg;
      }
    }
  }
}
.Dropdown-menu--top {
  top: auto;
  bottom: 100%;
}
.Dropdown-menu--right {
  left: auto;
  right: 0;
}
.Dropdown-header {
  padding: 10px 15px;
  color: @heading-color;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  margin-top: 8px;
  border-top: 1px solid @control-bg;
  white-space: nowrap;

  &:first-child {
    margin-top: -8px;
    border-top: 0;
  }
}
.Dropdown-separator {
  margin: 8px 0;
  background-color: @control-bg;
  height: 1px;
}

.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: (@zindex-dropdown - 10);
}

.Dropdown--split {
  .Dropdown-toggle .Button-icon {
    display: none;
  }
  .Dropdown-toggle .Button-caret {
    display: inline;
    margin: 0;
  }

  &.itemCount1 {
    .Button {
      border-radius: @border-radius !important;
    }
    .Dropdown-toggle {
      display: none;
    }
  }

  @media @tablet-up {
    .Dropdown-menu li:first-child {
      &, + li.Dropdown-separator {
        display: none;
      }
    }
  }
}

.Dropdown--expanded() {
  .Dropdown-toggle {
    display: none;
  }
  .Dropdown-menu {
    display: block;
    border: 0;
    width: auto;
    margin: 0;
    padding: 0;
    min-width: 0;
    float: none;
    position: static;
    background: none;
    .box-shadow(none);
  }
}

@media @phone {
  .Dropdown.open {
    z-index: @zindex-modal;
  }
  .Dropdown .Dropdown-menu {
    margin: 0;
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: 0;
    top: auto;
    padding: 0;
    padding-bottom: 40px !important;
    display: block;
    max-height: 70vh;
    border-radius: 0;
    .box-shadow(0 2px 6px @shadow-color);
    visibility: hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .translate3d(0, 70vh, 0);
    .transition-transform(~" 0.3s, visibility 0s 0.3s");

    > li {
      > a, > button {
        background: @body-bg;
        font-size: 16px;
        padding: 15px 20px;

        &.hasIcon {
          padding-left: 50px;
        }
        .Button-icon {
          font-size: 16px;
          margin-left: -30px;
        }
        &:hover {
          background: @control-bg;
        }
      }
    }
    > .active {
      > a, > button {
        &, &:hover {
          background: @primary-color !important;
          color: #fff !important;
        }
      }
    }
    .open& {
      -webkit-transform: none;
              transform: none;
      visibility: visible;
      transition-delay: 0s;
    }
  }
  .Dropdown-separator {
    margin: 0;
  }
  .dropdown-backdrop {
    background: fade(@secondary-color, 90%);
    opacity: 0;
    .transition(~"opacity 0.3s");
    .translate3d(0, 0, 0);

    .open & {
      opacity: 1;
    }
  }
}


Fix ellipsis in vertex editor

Fix ellipsis in vertex editor

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