fix remnant from failed experiment

fix remnant from failed experiment

@inspector-background-color: #221e1c;
@inspector-changed-field: #dedede;
@inspector-controls-height: 82px;
@inspector-dark: #1c1817;
@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;
@inspector-width: 292px;
@inspector-main-padding: 20px;
@confirm-button-color: @charm-panel-orange;
@deny-button-color: #BBB;
@disabled-input-background-color: #727272;
@disabled-input-text-color: #252525;

/* This doesn't work in FF.
   https://bugzilla.mozilla.org/show_bug.cgi?id=546052
   field-saved-finished is completely transparent; unfortunately no browser
   currently supports transitioning from an image to none.
*/
.pulse-green-frames-mixin () {
    0% {
        background-image: url(/juju-ui/assets/images/field-saved.png);
    }
    100% {
        background-image: url(/juju-ui/assets/images/field-saved-finished.png);
    }
}

@-webkit-keyframes pulse-green {.pulse-green-frames-mixin;}
@-moz-keyframes pulse-green {.pulse-green-frames-mixin;}
@-ms-keyframes pulse-green {.pulse-green-frames-mixin;}
@-o-keyframes pulse-green {.pulse-green-frames-mixin;}
@keyframes pulse-green {.pulse-green-frames-mixin;}

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

    ::-webkit-scrollbar-track {
        background-color: #1c1815;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #505050;
        border-width: 0 1px;
        border-color: #1c1815;
    }
    /* Hide IE input clear control */
    input[type=text]::-ms-clear {
        display: none;
    }
    .left-breakout {
        .type9;
        position: absolute;
        top: 20px;
        bottom: @navbar-bottom-height + 20px;
        right: @inspector-width + 71px;
        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: @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;
        right: 70px;
        width: @inspector-width;
        min-height: 250px;
        border: 0;
        background-color: @inspector-background-color;
        color: #fff;
        /* Can be removed once the old inspector styles are removed. */
        margin: 0;
        font-size: 14px;

        form {
            margin: 0;
        }
        textarea,
        input[type=text],
        label {
            font-size: 14px;
        }
        input[type=checkbox].hidden-checkbox {
            display: none;
        }
        input[type=text] {
            .border-box;
            .create-border-radius(@border-radius);
            .create-box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.7));
            width: 100%;
            min-height: 30px;
            margin: 0;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
            background-position: right;
            background-repeat: no-repeat;

            &.valid {
                background-image: url(/juju-ui/assets/images/form-validation-tick.png);
            }

            &.invalid {
                background-image: url(/juju-ui/assets/images/form-validation-cross.png);
            }
        }
        textarea {
            margin: 0;
            width: 96%;
        }
        /* Buttons */
        button.unit-action-button,
        .controls button,
        .inspector-buttons a {
            .create-border-radius(@border-radius);
            // Using a variable here because LESS strips commas in mixin args.
            @box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
            .create-box-shadow(@box-shadow);
            cursor: pointer;
            height: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        button.unit-action-button,
        .controls button,
        .inspector-buttons a {
            display: inline-block;
            vertical-align: middle;
            width: 47%;
            margin: 20px 0;
            padding: 0;
            border: none;
            color: #505050;
            text-align: center;
            text-decoration: none;
            line-height: 30px;
        }
        .controls button,
        .inspector-buttons a {
            color: #fff;

            &.cancel-button,
            &.cancel {
                background:  @inspector-dark;
            }
            &.initiate-destroy,
            &.confirm-num-units,
            &.confirm {
                float: right;
                background-color: @confirm-button-color;

                &:disabled {
                    background-color: #802E0E;
                    color: #eee;
                }
            }
        }
        .toggle {

            span {
                display: block;
                vertical-align: top;
                line-height: 30px;
            }

            .textvalue {
              float: left;
              height: 26px;
              padding-top: 5px;
              text-transform: capitalize;
            }

            &.expose {
                label {
                    display: inline-block;
                    line-height: 34px;
                }
            }

            .toggle-switch {
                display: inline-block;
                vertical-align: top;
                float: right;
                padding-left: 15px;

                label {
                    .create-border-radius(@border-radius);
                    width: 56px;
                    background-color: #282828;
                    display: inline-block;
                    position: relative;
                    margin: 0;
                    // Using a variable here because LESS strips commas in mixin args.
                    @box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
                    .create-box-shadow(@box-shadow);
                    cursor: pointer;
                    height: 30px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

                    .handle {
                        .create-border-radius(@border-radius);
                        .create-box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.4));
                        position: absolute;
                        z-index: 501;
                        left: 0;
                        height: 24px;
                        width: 24px;
                        margin: 4px;
                        background-color: #505050;
                        text-align: center;
                        line-height: 20px;
                        font-size: 16px;
                        .transition(left .1s ease-in-out);
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                    &:after,
                    &:before {
                        content: '';
                        position: absolute;
                        display: block;
                        top: 4px;
                        left: 4px;
                        width: 24px;
                        height: 24px;
                        background-position: center center;
                        background-repeat: no-repeat;
                    }
                    &:before {
                        z-index: 502;
                        background-image:
                            url(/juju-ui/assets/images/toggle-off.png);
                    }
                    &:after {
                        z-index: 502;
                        left: 29px;
                        background-image:
                            url(/juju-ui/assets/images/toggle-on-inactive.png);
                    }
                }
                input.hidden-checkbox:checked ~ label,
                input.expose-toggle:checked ~ label {
                    .handle {
                        left: 25px;
                        background-color: @confirm-button-color;
                    }
                    &:before {
                        background-image:
                            url(/juju-ui/assets/images/toggle-off-inactive.png);
                    }
                    &:after {
                        background-image:
                            url(/juju-ui/assets/images/toggle-on.png);
                    }
                }
            }
        }
        .destroy-service-prompt,
        .controls {
            .transition(.25s, max-height .3s);
            overflow: hidden;
            max-height: @inspector-controls-height;
            padding: 0 20px;
            background-color: @inspector-background-color;
            border-top: 1px solid @inspector-divider-bottom;
            border-bottom: 1px solid @inspector-divider-bottom;
            overflow: hidden;

            &.closed {
                max-height: 0;
            }
            &:before {
                content: "";
                display: block;
                height: 9px;
                margin: 0 -20px;
                background-color: @inspector-dark;
                border-bottom: 1px solid @inspector-divider-top;
            }
        }
        .text-in-input {
            display: block;
            height: 25px;
            margin: -25px 10px 0 0;
            color: #b5b5b5;
            text-align: right;
        }
        .config-field.boolean {
            margin-right: 10px;
        }
        .unit-scaling {
            padding-top: 20px;
            border-bottom: 1px solid @inspector-divider-bottom;

            .unit-label,
            .current-unit-num {
                display: inline-block;
            }
            .unit-label,
            .current-unit-num {
                height: 30px;
                line-height: 30px;
            }
            .units-input {
                float: right;

                input.num-units-control {
                    width: 101px;
                }
                .unit-label {
                    padding: 0 20px 0 0;
                }
            }
            .constraint-details {
                margin-top: 10px;
            }
            .edit-constraints {
                color: #625f5a;
                text-decoration: underline;
            }
            .editable-constraints {
                margin-top: 10px;
            }
            .unit-constraints-confirm {
                overflow: hidden;
                max-height: 200px;
                margin-top: 2px;
                padding-top: 20px;
                letter-spacing: normal;
                .transition(.25s, max-height .3s);

                &.closed {
                    padding-top: 0;
                }
                .constraint-details {
                    display: block;
                }
                .inspector-buttons {
                    a {
                        margin-bottom: 0;
                    }
                    .cancel-num-units {
                        margin-left: 0;
                    }
                    .confirm-num-units {
                        margin-right: 0;
                    }
                }
            }
            .unit-constraints-confirm.closed {
                max-height: 0;
            }
            .unit-constraints-confirm.editing {
                max-height: 500px;
            }
        }

        .settings-wrapper {
            .border-box;
            position: relative;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            border-top: 1px solid @inspector-divider-top;
            border-bottom: 1px solid @inspector-divider-bottom;

            &:first-child {
                padding-top: 0;
                border-top: none;
            }
            &:last-child {
                padding-bottom: 0;
                border-bottom: none;
            }
            label {
                margin: 0 0 10px 0;
            }
            .settings-description {
                clear: both;
                padding-top: 12px;
                font-weight: 200;
                /* 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;
            }
        }
        .config-file {
            input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                z-index: 0;
            }
            .fakebutton {
                .create-border-radius(@border-radius);
                z-index: 2;
                padding: 5px;
                background: transparent
                    url(/juju-ui/assets/images/import.png)
                    right center no-repeat;
                border: 1px solid #6B6B6B;
                color: #fff;
                cursor: pointer;
            }
        }
        .ghost {
            input[type=text] {
                /* Fixes the bottom of the service name getting cutoff (IE10) */
                height: auto;
            }
            & .use-defaults {
                textarea,
                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;
                }
            }
            .service-config {
                padding-top: 20px;
                border-top: 1px solid @inspector-divider-top;
            }
        }
        /* Resetting panel styles. Can be removed after old inspector styles are
           removed. (ServiceInspector) */
        .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-x: hidden;
            overflow-y: auto;
            /* overwritten by the recalculateHeight() method in
               viewlet-manager.js. Important to avoid flash of incorrectly
               calculated height */
            max-height: 250px;
        }

        .header-slot {
            header {
                padding: @inspector-main-padding;

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

                    .icon {
                        margin-right: 10px;
                        vertical-align: top;

                        img {
                            /* bootstrap sets this to middle */
                            vertical-align: baseline;
                        }
                    }
                    .icon,
                    .icon img {
                        /* Required for sizing images in IE10 */
                        width: 30px;
                        height: 30px;

                    }
                    .details-wrapper {
                        width: 180px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        div.service-name {
                            margin-top: -0.1em;
                            font-size: 20px;
                            font-weight: 300;
                            line-height: 1.2;
                        }
                        input.service-name {
                            display: block;
                            width: 170px;
                            margin-bottom: 5px;
                        }
                    }
                    .charm-url {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .close {
                        /* required to overwrite bootstrap styles */
                        text-shadow: none;
                        color: #a0a0a0;
                        font-weight: 200;
                        opacity: 1;
                        font-size: 17px;
                        line-height: 17px;
                        /* not overwriting */
                        vertical-align: top;
                        margin-top: -6px;
                    }
                    & > div {
                        display: inline-block;
                    }
                }
            }
        }

        .viewlet-manager-navigation {
            min-height: 9px;
            margin: 0;
            padding-left: @inspector-main-padding;
            background-color: @inspector-dark;
            border-top: 1px solid @inspector-divider-bottom;
            border-bottom: 1px solid @inspector-divider-top;

            li {
                display: inline-block;

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

                    &:hover {
                        text-decoration: none;
                    }
                    &.active {
                        background-color: #12110f;
                        border-bottom: 3px solid @charm-panel-orange;

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

            .hightlight {
                background: none repeat scroll 0 0 #DC4915;
                display: block;
                height: 3px;
                left: 10px;
                position: relative;
                top: 0;
                width: 57px;
            }
        }

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

        .configuration-buttons {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            /* One index higher than the toggle
            handle which it sometimes covers */
            z-index: 502;
        }
        .settings-constraints,
        .settings-config {
            margin-bottom: @inspector-controls-height;
        }
        .view-container {
            margin-top: -1px;

            .view-content {
                padding: 20px @inspector-main-padding;
                border-top: 1px solid @inspector-divider-top;
                border-bottom: 1px solid @inspector-divider-bottom;

                &:last-child {
                    border-bottom: none;
                }
                &.join-top {
                    padding-top: 10px;
                    border-top: none;
                }
            }
            .settings-wrapper {
                position: relative;

                span.resolver .conflicted-env {
                  display: inline-block;
                  min-width: 25px;
                  min-height: 25px;
                }
                .config-field,
                .constraint-field {
                  .transition(background 1s linear);
                  background-repeat: no-repeat;
                  background-position: right center;
                  background-image: none;
                  margin-bottom: 0px;
                }
                .config-field {
                  &.boolean {
                    width: auto;
                    display: inline-block;
                  }
                }
                .resolver {
                  color: black;
                  background-color: white;
                  border: 1px solid @inspector-changed-field;
                  border-radius: 1px;

                  div {
                    width: 270px;
                  }
                }
                .modified {
                  background-color: @inspector-changed-field;
                  background-image: url(/juju-ui/assets/images/field-changed.png);
                  background-repeat: no-repeat;

                  &.boolean {
                    margin: 2px 0 0 10px;
                    background-color: inherit;
                    display: inline-block;
                    min-width: 13px;
                    min-height: 13px;
                  }
                }
                .conflict-pending {
                  background-color: @inspector-changed-field;
                  background-image: url(/juju-ui/assets/images/field-conflict.png);

                  &.boolean {
                    background-color: inherit;
                    background-image: url(/juju-ui/assets/images/field-conflict-14.png);
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin-top: 5px;
                    margin-right: 5px;
                  }
                }

                .conflict {
                  background-color: @inspector-changed-field;
                  background-image: url(/juju-ui/assets/images/field-resolved.png);
                }

                /* Inputs does not need to have the background-image */
                input.conflict {
                  background-image: none;
                }

                /* When on a boolean state we don't have the grey background
                 * of an input to put the background icon against, just make
                 * it transparent to display on the black background */
                .resolver.boolean {
                  background-color: transparent;
                  border: none;

                  .conflict {
                    background-color: transparent;
                  }
                }

                .change-saved {
                    background-image: url(/juju-ui/assets/images/field-saved.png);
                    background-position: center right;
                    background-repeat: no-repeat;
                    .animation(pulse-green 1s);
                    .animation-fill-mode(forwards);
                    .transition(none);
                }
            }
        }
        .status {
            display: inline-block;
            width: 33%;
            text-align: center;

            &.running {
                background-color: #00b711;
            }
            &.pending {
                background-color: #ede837;
            }
            &.error {
                background-color: #ba0000;
            }
        }
        .destroy-service-trigger {
            span {
                cursor: pointer;

                .sprite {
                    vertical-align: -10%;
                    margin-right: 7px;
                }
            }
        }

        .destroy-service-prompt {
            overflow: hidden;
            max-height: 200px;
            .transition(.25s, max-height .3s);
            position: absolute;
            bottom: 0;
            left: 0;
            /* One index higher than the toggle
            handle which it sometimes covers */
            z-index: 502;

            .message {
                margin: 20px 0 0 0;
            }
        }

        .destroy-service-prompt.closed {
            max-height: 0;
        }
        .viewlet-wrapper {
            h4,
            h3,
            h2 {
                .border-box;
                margin-bottom: 0;
                padding: 10px @inspector-main-padding;
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                font-size: 16px;
                font-weight: 200;
                color: @charm-panel-configure-title-color;

                .sprite {
                    vertical-align: -2%;
                    margin-right: 7px;
                }
            }
            h2.join-bottom {
                padding-top: 0;
                padding-bottom: 0;
                border-bottom: none;
            }
            h4 {
                padding: 7px 10px;
                background-color: #000;
                border-top-color: #262626;
                font-size: 14px;
            }
            .statusbar {
                .create-border-radius(@border-radius);
                width: 250px;
                height: 30px;
                margin-top: 12px;
            }
        }

        .overview-footer-item {
            padding: @inspector-main-padding;
            border-top: 1px solid @inspector-divider-top;
            border-bottom: 1px solid @inspector-divider-bottom;

            &.expose {
                padding-top: 10px;
                padding-bottom: 5px;
            }
        }

        .overview-unit-list {
            margin: 0;

            .action-button-wrapper {
                text-align: center;
                padding: 20px 0;
            }

            .status-unit-header {
                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;
                    vertical-align: 15%;
                    width: 10px;
                    height: 3px;
                    margin-left: 5px;
                    background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
                }
            }

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

            .status-unit-header.error {
                background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
            }
            .status-unit-header.upgrade-service {
                background-image: url("/juju-ui/assets/images/inspector-charm-upgrade.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-header.landscape-needs-reboot,
            .status-unit-header.landscape-security-upgrades {
                background-image: url("/juju-ui/assets/images/inspector-charm-landscape.png");
            }

            .status-unit-content {
                .transition(.25s, max-height .3s);
                overflow: hidden;
                background: @charm-panel-background-color;

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

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

                a.landscape {
                    font-size: 12px;
                }

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

                li {
                    list-style-type: none;
                    padding: 7px 10px 7px 10px;
                    border-top: 1px solid @inspector-status-border-color;
                    clear: both;

                    .right-link {
                        float: right;
                        color: @confirm-button-color;
                    }
                }

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

                button.unit-action-button {
                    width: 70px;
                    margin: 0 3px 0;
                    background: @charm-panel-series-color;
                }
                &.pending {
                    .action-button-wrapper {
                        display: none;
                    }
                }
                &.running {
                    .resolve,
                    .retry {
                        display: none;
                    }
                }
            }

            .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;
            }
            .status-unit-content.landscape-security-upgrades ul li,
            .status-unit-content.landscape-needs-reboot ul li {
                background: url("/juju-ui/assets/images/inspector-charm-landscape.png") no-repeat scroll 35px center;
            }
        }

    }

}

@inspector-background-color: #221e1c;
@inspector-changed-field: #dedede;
@inspector-controls-height: 82px;
@inspector-dark: #1c1817;
@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;
@inspector-width: 292px;
@inspector-main-padding: 20px;
@confirm-button-color: @charm-panel-orange;
@deny-button-color: #BBB;
@disabled-input-background-color: #727272;
@disabled-input-text-color: #252525;

/* This doesn't work in FF.
   https://bugzilla.mozilla.org/show_bug.cgi?id=546052
   field-saved-finished is completely transparent; unfortunately no browser
   currently supports transitioning from an image to none.
*/
.pulse-green-frames-mixin () {
    0% {
        background-image: url(/juju-ui/assets/images/field-saved.png);
    }
    100% {
        background-image: url(/juju-ui/assets/images/field-saved-finished.png);
    }
}

@-webkit-keyframes pulse-green {.pulse-green-frames-mixin;}
@-moz-keyframes pulse-green {.pulse-green-frames-mixin;}
@-ms-keyframes pulse-green {.pulse-green-frames-mixin;}
@-o-keyframes pulse-green {.pulse-green-frames-mixin;}
@keyframes pulse-green {.pulse-green-frames-mixin;}

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

    ::-webkit-scrollbar-track {
        background-color: #1c1815;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #505050;
        border-width: 0 1px;
        border-color: #1c1815;
    }
    /* Hide IE input clear control */
    input[type=text]::-ms-clear {
        display: none;
    }
    .left-breakout {
        .type9;
        position: absolute;
        top: 20px;
        bottom: @navbar-bottom-height + 20px;
        right: @inspector-width + 71px;
        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: @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;
        right: 70px;
        width: @inspector-width;
        min-height: 250px;
        border: 0;
        background-color: @inspector-background-color;
        color: #fff;
        /* Can be removed once the old inspector styles are removed. */
        margin: 0;
        font-size: 14px;

        form {
            margin: 0;
        }
        textarea,
        input[type=text],
        label {
            font-size: 14px;
        }
        input[type=checkbox].hidden-checkbox {
            display: none;
        }
        input[type=text] {
            .border-box;
            .create-border-radius(@border-radius);
            .create-box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.7));
            width: 100%;
            min-height: 30px;
            margin: 0;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
            background-position: right;
            background-repeat: no-repeat;

            &.valid {
                background-image: url(/juju-ui/assets/images/form-validation-tick.png);
            }

            &.invalid {
                background-image: url(/juju-ui/assets/images/form-validation-cross.png);
            }
        }
        textarea {
            margin: 0;
            width: 96%;
        }
        /* Buttons */
        button.unit-action-button,
        .controls button,
        .inspector-buttons a {
            .create-border-radius(@border-radius);
            // Using a variable here because LESS strips commas in mixin args.
            @box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
            .create-box-shadow(@box-shadow);
            cursor: pointer;
            height: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        button.unit-action-button,
        .controls button,
        .inspector-buttons a {
            display: inline-block;
            vertical-align: middle;
            width: 47%;
            margin: 20px 0;
            padding: 0;
            border: none;
            color: #505050;
            text-align: center;
            text-decoration: none;
            line-height: 30px;
        }
        .controls button,
        .inspector-buttons a {
            color: #fff;

            &.cancel-button,
            &.cancel {
                background:  @inspector-dark;
            }
            &.initiate-destroy,
            &.confirm-num-units,
            &.confirm {
                float: right;
                background-color: @confirm-button-color;

                &:disabled {
                    background-color: #802E0E;
                    color: #eee;
                }
            }
        }
        .toggle {

            span {
                display: block;
                vertical-align: top;
                line-height: 30px;
            }

            .textvalue {
              float: left;
              height: 26px;
              padding-top: 5px;
              text-transform: capitalize;
            }

            &.expose {
                label {
                    display: inline-block;
                    line-height: 34px;
                }
            }

            .toggle-switch {
                display: inline-block;
                vertical-align: top;
                float: right;
                padding-left: 15px;

                label {
                    .create-border-radius(@border-radius);
                    width: 56px;
                    background-color: #282828;
                    display: inline-block;
                    position: relative;
                    margin: 0;
                    // Using a variable here because LESS strips commas in mixin args.
                    @box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
                    .create-box-shadow(@box-shadow);
                    cursor: pointer;
                    height: 30px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

                    .handle {
                        .create-border-radius(@border-radius);
                        .create-box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.4));
                        position: absolute;
                        z-index: 501;
                        left: 0;
                        height: 24px;
                        width: 24px;
                        margin: 4px;
                        background-color: #505050;
                        text-align: center;
                        line-height: 20px;
                        font-size: 16px;
                        .transition(left .1s ease-in-out);
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                    &:after,
                    &:before {
                        content: '';
                        position: absolute;
                        display: block;
                        top: 4px;
                        left: 4px;
                        width: 24px;
                        height: 24px;
                        background-position: center center;
                        background-repeat: no-repeat;
                    }
                    &:before {
                        z-index: 502;
                        background-image:
                            url(/juju-ui/assets/images/toggle-off.png);
                    }
                    &:after {
                        z-index: 502;
                        left: 29px;
                        background-image:
                            url(/juju-ui/assets/images/toggle-on-inactive.png);
                    }
                }
                input.hidden-checkbox:checked ~ label,
                input.expose-toggle:checked ~ label {
                    .handle {
                        left: 25px;
                        background-color: @confirm-button-color;
                    }
                    &:before {
                        background-image:
                            url(/juju-ui/assets/images/toggle-off-inactive.png);
                    }
                    &:after {
                        background-image:
                            url(/juju-ui/assets/images/toggle-on.png);
                    }
                }
            }
        }
        .destroy-service-prompt,
        .controls {
            .transition(.25s, max-height .3s);
            overflow: hidden;
            max-height: @inspector-controls-height;
            padding: 0 20px;
            background-color: @inspector-background-color;
            border-top: 1px solid @inspector-divider-bottom;
            border-bottom: 1px solid @inspector-divider-bottom;
            overflow: hidden;

            &.closed {
                max-height: 0;
            }
            &:before {
                content: "";
                display: block;
                height: 9px;
                margin: 0 -20px;
                background-color: @inspector-dark;
                border-bottom: 1px solid @inspector-divider-top;
            }
        }
        .text-in-input {
            display: block;
            height: 25px;
            margin: -25px 10px 0 0;
            color: #b5b5b5;
            text-align: right;
        }
        .config-field.boolean {
            margin-right: 10px;
        }
        .unit-scaling {
            padding-top: 20px;
            border-bottom: 1px solid @inspector-divider-bottom;

            .unit-label,
            .current-unit-num {
                display: inline-block;
            }
            .unit-label,
            .current-unit-num {
                height: 30px;
                line-height: 30px;
            }
            .units-input {
                float: right;

                input.num-units-control {
                    width: 101px;
                }
                .unit-label {
                    padding: 0 20px 0 0;
                }
            }
            .constraint-details {
                margin-top: 10px;
            }
            .edit-constraints {
                color: #625f5a;
                text-decoration: underline;
            }
            .editable-constraints {
                margin-top: 10px;
            }
            .unit-constraints-confirm {
                overflow: hidden;
                max-height: 200px;
                margin-top: 2px;
                padding-top: 20px;
                letter-spacing: normal;
                .transition(.25s, max-height .3s);

                &.closed {
                    padding-top: 0;
                }
                .constraint-details {
                    display: block;
                }
                .inspector-buttons {
                    a {
                        margin-bottom: 0;
                    }
                    .cancel-num-units {
                        margin-left: 0;
                    }
                    .confirm-num-units {
                        margin-right: 0;
                    }
                }
            }
            .unit-constraints-confirm.closed {
                max-height: 0;
            }
            .unit-constraints-confirm.editing {
                max-height: 500px;
            }
        }

        .settings-wrapper {
            .border-box;
            position: relative;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            border-top: 1px solid @inspector-divider-top;
            border-bottom: 1px solid @inspector-divider-bottom;

            &:first-child {
                padding-top: 0;
                border-top: none;
            }
            &:last-child {
                padding-bottom: 0;
                border-bottom: none;
            }
            label {
                margin: 0 0 10px 0;
            }
            .settings-description {
                clear: both;
                padding-top: 12px;
                font-weight: 200;
                /* 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;
            }
        }
        .config-file {
            input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                z-index: 0;
            }
            .fakebutton {
                .create-border-radius(@border-radius);
                z-index: 2;
                padding: 5px;
                background: transparent
                    url(/juju-ui/assets/images/import.png)
                    right center no-repeat;
                border: 1px solid #6B6B6B;
                color: #fff;
                cursor: pointer;
            }
        }
        .ghost {
            input[type=text] {
                /* Fixes the bottom of the service name getting cutoff (IE10) */
                height: auto;
            }
            & .use-defaults {
                textarea,
                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;
                }
            }
            .service-config {
                padding-top: 20px;
                border-top: 1px solid @inspector-divider-top;
            }
        }
        /* Resetting panel styles. Can be removed after old inspector styles are
           removed. (ServiceInspector) */
        .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-x: hidden;
            overflow-y: auto;
            /* overwritten by the recalculateHeight() method in
               viewlet-manager.js. Important to avoid flash of incorrectly
               calculated height */
            max-height: 250px;
        }

        .header-slot {
            header {
                padding: @inspector-main-padding;

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

                    .icon {
                        margin-right: 10px;
                        vertical-align: top;

                        img {
                            /* bootstrap sets this to middle */
                            vertical-align: baseline;
                        }
                    }
                    .icon,
                    .icon img {
                        /* Required for sizing images in IE10 */
                        width: 30px;
                        height: 30px;

                    }
                    .details-wrapper {
                        width: 180px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        div.service-name {
                            margin-top: -0.1em;
                            font-size: 20px;
                            font-weight: 300;
                            line-height: 1.2;
                        }
                        input.service-name {
                            display: block;
                            width: 170px;
                            margin-bottom: 5px;
                        }
                    }
                    .charm-url {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .close {
                        /* required to overwrite bootstrap styles */
                        text-shadow: none;
                        color: #a0a0a0;
                        font-weight: 200;
                        opacity: 1;
                        font-size: 17px;
                        line-height: 17px;
                        /* not overwriting */
                        vertical-align: top;
                        margin-top: -6px;
                    }
                    & > div {
                        display: inline-block;
                    }
                }
            }
        }

        .viewlet-manager-navigation {
            min-height: 9px;
            margin: 0;
            padding-left: @inspector-main-padding;
            background-color: @inspector-dark;
            border-top: 1px solid @inspector-divider-bottom;
            border-bottom: 1px solid @inspector-divider-top;

            li {
                display: inline-block;

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

                    &:hover {
                        text-decoration: none;
                    }
                    &.active {
                        background-color: #12110f;
                        border-bottom: 3px solid @charm-panel-orange;

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

            .hightlight {
                background: none repeat scroll 0 0 #DC4915;
                display: block;
                height: 3px;
                left: 10px;
                position: relative;
                top: 0;
                width: 57px;
            }
        }

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

        .configuration-buttons {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            /* One index higher than the toggle
            handle which it sometimes covers */
            z-index: 502;
        }
        .settings-constraints,
        .settings-config {
            margin-bottom: @inspector-controls-height;
        }
        .view-container {
            margin-top: -1px;

            .view-content {
                padding: 20px @inspector-main-padding;
                border-top: 1px solid @inspector-divider-top;
                border-bottom: 1px solid @inspector-divider-bottom;

                &:last-child {
                    border-bottom: none;
                }
                &.join-top {
                    padding-top: 10px;
                    border-top: none;
                }
            }
            .settings-wrapper {
                position: relative;

                span.resolver .conflicted-env {
                  display: inline-block;
                  min-width: 25px;
                  min-height: 25px;
                }
                .config-field,
                .constraint-field {
                  .transition(background 1s linear);
                  background-repeat: no-repeat;
                  background-position: right center;
                  background-image: none;
                  margin-bottom: 0px;
                }
                .config-field {
                  &.boolean {
                    width: auto;
                    display: inline-block;
                  }
                }
                .resolver {
                  color: black;
                  background-color: white;
                  border: 1px solid @inspector-changed-field;
                  border-radius: 1px;

                  div {
                    width: 270px;
                  }
                }
                .modified {
                  background-color: @inspector-changed-field;
                  background-image: url(/juju-ui/assets/images/field-changed.png);
                  background-repeat: no-repeat;

                  &.boolean {
                    margin: 2px 0 0 10px;
                    background-color: inherit;
                    display: inline-block;
                    min-width: 13px;
                    min-height: 13px;
                  }
                }
                .conflict-pending {
                  background-color: @inspector-changed-field;
                  background-image: url(/juju-ui/assets/images/field-conflict.png);

                  &.boolean {
                    background-color: inherit;
                    background-image: url(/juju-ui/assets/images/field-conflict-14.png);
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin-top: 5px;
                    margin-right: 5px;
                  }
                }

                .conflict {
                  background-color: @inspector-changed-field;
                  background-image: url(/juju-ui/assets/images/field-resolved.png);
                }

                /* Inputs does not need to have the background-image */
                input.conflict {
                  background-image: none;
                }

                /* When on a boolean state we don't have the grey background
                 * of an input to put the background icon against, just make
                 * it transparent to display on the black background */
                .resolver.boolean {
                  background-color: transparent;
                  border: none;

                  .conflict {
                    background-color: transparent;
                  }
                }

                .change-saved {
                    background-image: url(/juju-ui/assets/images/field-saved.png);
                    background-position: center right;
                    background-repeat: no-repeat;
                    .animation(pulse-green 1s);
                    .animation-fill-mode(forwards, forwards);
                    .transition(none);
                }
            }
        }
        .status {
            display: inline-block;
            width: 33%;
            text-align: center;

            &.running {
                background-color: #00b711;
            }
            &.pending {
                background-color: #ede837;
            }
            &.error {
                background-color: #ba0000;
            }
        }
        .destroy-service-trigger {
            span {
                cursor: pointer;

                .sprite {
                    vertical-align: -10%;
                    margin-right: 7px;
                }
            }
        }

        .destroy-service-prompt {
            overflow: hidden;
            max-height: 200px;
            .transition(.25s, max-height .3s);
            position: absolute;
            bottom: 0;
            left: 0;
            /* One index higher than the toggle
            handle which it sometimes covers */
            z-index: 502;

            .message {
                margin: 20px 0 0 0;
            }
        }

        .destroy-service-prompt.closed {
            max-height: 0;
        }
        .viewlet-wrapper {
            h4,
            h3,
            h2 {
                .border-box;
                margin-bottom: 0;
                padding: 10px @inspector-main-padding;
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                font-size: 16px;
                font-weight: 200;
                color: @charm-panel-configure-title-color;

                .sprite {
                    vertical-align: -2%;
                    margin-right: 7px;
                }
            }
            h2.join-bottom {
                padding-top: 0;
                padding-bottom: 0;
                border-bottom: none;
            }
            h4 {
                padding: 7px 10px;
                background-color: #000;
                border-top-color: #262626;
                font-size: 14px;
            }
            .statusbar {
                .create-border-radius(@border-radius);
                width: 250px;
                height: 30px;
                margin-top: 12px;
            }
        }

        .overview-footer-item {
            padding: @inspector-main-padding;
            border-top: 1px solid @inspector-divider-top;
            border-bottom: 1px solid @inspector-divider-bottom;

            &.expose {
                padding-top: 10px;
                padding-bottom: 5px;
            }
        }

        .overview-unit-list {
            margin: 0;

            .action-button-wrapper {
                text-align: center;
                padding: 20px 0;
            }

            .status-unit-header {
                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;
                    vertical-align: 15%;
                    width: 10px;
                    height: 3px;
                    margin-left: 5px;
                    background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
                }
            }

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

            .status-unit-header.error {
                background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
            }
            .status-unit-header.upgrade-service {
                background-image: url("/juju-ui/assets/images/inspector-charm-upgrade.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-header.landscape-needs-reboot,
            .status-unit-header.landscape-security-upgrades {
                background-image: url("/juju-ui/assets/images/inspector-charm-landscape.png");
            }

            .status-unit-content {
                .transition(.25s, max-height .3s);
                overflow: hidden;
                background: @charm-panel-background-color;

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

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

                a.landscape {
                    font-size: 12px;
                }

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

                li {
                    list-style-type: none;
                    padding: 7px 10px 7px 10px;
                    border-top: 1px solid @inspector-status-border-color;
                    clear: both;

                    .right-link {
                        float: right;
                        color: @confirm-button-color;
                    }
                }

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

                button.unit-action-button {
                    width: 70px;
                    margin: 0 3px 0;
                    background: @charm-panel-series-color;
                }
                &.pending {
                    .action-button-wrapper {
                        display: none;
                    }
                }
                &.running {
                    .resolve,
                    .retry {
                        display: none;
                    }
                }
            }

            .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;
            }
            .status-unit-content.landscape-security-upgrades ul li,
            .status-unit-content.landscape-needs-reboot ul li {
                background: url("/juju-ui/assets/images/inspector-charm-landscape.png") no-repeat scroll 35px center;
            }
        }

    }

}


added stylesheet

added stylesheet

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/pstephan1187/atom-laravel4.git/'


Add breadcrumb styles

Add breadcrumb styles

with bootstrap patterns

fatal: unable to access 'https://github.com/ABS-org/cdp_strap.git/': The requested URL returned error: 403


adds final corrections

adds final corrections

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/hevnly/asset-bazaar.git/'


Remove redundant hover styling

Remove redundant hover styling

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

.beatmap-scoreboard-table {
  @_top: beatmap-scoreboard-table;
  @row-height: 1.8em;

  width: 100%;
  overflow-x: auto;

  &__table {
    width: 100%;
    min-width: 800px;
    font-size: 12px;
  }

  &__grade {
    width: 100%;
    height: @row-height;
    .center-content();
  }

  &__header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 5px;

    // in order of columns
    &--rank {
      width: 40px;
      text-align: right;
    }

    &--grade {
      width: 70px;
    }

    &--score {
      width: 70px;
    }

    &--accuracy {
      width: 70px;
    }

    &--flag {
      width: 25px;
    }

    &--maxcombo {
      width: 100px;
    }

    &--hitstat {
      max-width: 45px;
      min-width: 30px;
    }

    &--miss {
      width: 70px;
    }

    &--pp {
      width: 30px;
    }

    &--mods {
      min-width: 50px;
      padding-left: 5px;
    }
  }

  &__body-row {
    height: @row-height;

    // styles applied to td instead of tr 'cuz firefox is a poop (can't do rounded corners on tr)
    &:nth-child(odd) {
      td {
        background-color: #eee;
      }
    }

    td:first-child {
      // rounded corners for left side
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    td:last-child {
      // ...and right side
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      padding-right: 10px;
    }

    &:hover {
      td {
        background-color: #ccc;
      }
    }
  }

  &__mods {
    width: 1%; // don't let the column expand unless required
  }

  &__perfect {
    color: @green;
  }

  &__rank {
    font-weight: 700;
    text-align: right;
  }

  &__score {
    .@{_top}__row--first & {
      font-weight: 700;
    }
  }

  &__user-link {
    color: #555;
  }

  &__zero {
    color: #aaa;
  }
}

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

.beatmap-scoreboard-table {
  @_top: beatmap-scoreboard-table;
  @row-height: 1.8em;

  width: 100%;
  overflow-x: auto;

  &__table {
    width: 100%;
    min-width: 800px;
    font-size: 12px;
  }

  &__grade {
    width: 100%;
    height: @row-height;
    .center-content();
  }

  &__header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 5px;

    // in order of columns
    &--rank {
      width: 40px;
      text-align: right;
    }

    &--grade {
      width: 70px;
    }

    &--score {
      width: 70px;
    }

    &--accuracy {
      width: 70px;
    }

    &--flag {
      width: 25px;
    }

    &--maxcombo {
      width: 100px;
    }

    &--hitstat {
      max-width: 45px;
      min-width: 30px;
    }

    &--miss {
      width: 70px;
    }

    &--pp {
      width: 30px;
    }

    &--mods {
      min-width: 50px;
      padding-left: 5px;
    }
  }

  &__body-row {
    height: @row-height;

    // styles applied to td instead of tr 'cuz firefox is a poop (can't do rounded corners on tr)
    &:nth-child(odd) {
      td {
        background-color: #eee;
      }
      &:hover {
        td {
          background-color: #ccc;
        }
      }
    }

    td:first-child {
      // rounded corners for left side
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    td:last-child {
      // ...and right side
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      padding-right: 10px;
    }

    &:hover {
      td {
        background-color: #ccc;
      }
    }
  }

  &__mods {
    width: 1%; // don't let the column expand unless required
  }

  &__perfect {
    color: @green;
  }

  &__rank {
    font-weight: 700;
    text-align: right;
  }

  &__score {
    .@{_top}__row--first & {
      font-weight: 700;
    }
  }

  &__user-link {
    color: #555;
  }

  &__zero {
    color: #aaa;
  }
}


Fix tab bottom border

Fix tab bottom border

Issue https://github.com/atom/one-dark-ui/issues/106

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


LESS transition function

LESS transition function

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


added mixin to handle vendor prefixes

added mixin to handle vendor prefixes

fatal: unable to access 'https://github.com/Ondama/jQuery-Card-shifting.git/': The requested URL returned error: 403


fix(login): Fix width of login button (#9781)

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


Add animations LESS file

Add animations LESS file

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


Nicer OAuth configuration dialog with bootstrap

Apparently, bootstrap sets all <label> elements to have display: block,
which borkes the layout on our OAuth configuration dialogs. So,
let's just make those <label> elements be display: inline within
that dialog.

Tested on an app with and without bootstrap.

//////////////////// MIXINS

// Minimal, well-documented, general-purpose CSS mixins.
// (Some are same as Bootstrap.)

////////// Box-Sizing: Border-Box

// Setting `box-sizing: border-box` on an element causes the CSS
// layout algorithm to interpret `width` and `height` declarations
// as referring to the size of the border box (outside the border),
// not the content box as usual (inside the padding).
//
// This is especially useful for stretching a form element to the
// width of its container even if the form element has arbitrary
// padding and borders, which can be done using `width: 100%`.
//
// Browser support is IE 8+ and all modern browsers, with the caveat
// that `-moz-box-sizing` in Firefox is considered to have some
// buggy or non-compliant behavior.  For example, min/max-width/height
// may not interact correctly. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=243412.
.box-sizing-by-border () {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

////////// Box-Shadow

.box-shadow (...) {
  box-shadow: @arguments;
  -webkit-box-shadow: @arguments; // For Android
}

////////// Unselectable

.unselectable () {
  -webkit-user-select: none; // Chrome/Safari
  -moz-user-select: none; // Firefox
  -ms-user-select: none; // IE10+

  // These delarations not implemented in browsers yet:
  -o-user-select: none;
  user-select: none;

  // In IE <= 9 and Opera, need unselectable="on" in the HTML.
}

//////////////////// LOGIN BUTTONS

@login-buttons-accounts-dialog-width: 250px;
@login-buttons-color: #596595;
@login-buttons-color-border: darken(@login-buttons-color, 10%);
@login-buttons-color-active: lighten(@login-buttons-color, 10%);
@login-buttons-color-active-border: darken(@login-buttons-color-active, 10%);

@login-buttons-config-color: darken(#f53, 10%);
@login-buttons-config-color-border: darken(@login-buttons-config-color, 10%);
@login-buttons-config-color-active: lighten(@login-buttons-config-color, 10%);
@login-buttons-config-color-active-border: darken(@login-buttons-config-color-active, 10%);

#login-buttons {

  display: inline-block;
  margin-right: 0.2px; // Fixes display on IE8: http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html

  // This seems to keep the height of the line from
  // being sensitive to the presence of the unicode down arrow,
  // which otherwise bumps the baseline down by 1px.
  line-height: 1;

  .login-button {
    position: relative; // so that we can position the image absolutely within the button
  }

  .login-buttons-with-only-one-button {
    display: inline-block;
    .login-button { display: inline-block; }
    .login-text-and-button {
      display: inline-block;
    }
  }

  .login-display-name {
    display: inline-block;
    padding-right: 2px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .loading {
    line-height: 1;
    background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA);
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

#login-buttons .login-button, .accounts-dialog .login-button {
  cursor: pointer;
  .unselectable();
  padding: 4px 8px;

  font-size: 80%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;

  text-align: center;
  color: #fff;

  background: @login-buttons-color;
  border: 1px solid @login-buttons-color-border;

  border-radius: 4px;

  &:hover {
    background: @login-buttons-color-active;
  }
  &:active {
    background: @login-buttons-color-active;
    .box-shadow(0 2px 3px 0 rgba(0, 0, 0, 0.2) inset);
  }

  &.login-button-disabled, &.login-button-disabled:active {
    color: #ddd;
    background: #aaa;
    border: 1px solid lighten(#aaa, 10%);
    .box-shadow(none);
  }
}

// precendence of this selector is significant
.accounts-dialog * {
  // A base for our dialog CSS, to reset browser styles and protect against
  // the app's CSS.  Dialogs include the dropdown, config modals, and the
  // reset password modal.  We can't completely isolate the dialogs from
  // the app's CSS, and that isn't the goal because the app can style them.
  // This rule is a compromise that should take precedence over some very
  // broad rules but be overridden by more specific ones.

  // Add more declarations here if they help the dialogs look good
  // out-of-the-box in more apps.

  padding: 0;
  margin: 0;
  line-height: inherit;
  color: inherit;
  font: inherit;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.accounts-dialog .login-button {
  width: auto;
  margin-bottom: 4px;
}

#login-buttons {
  .login-buttons-padding {
    display: inline-block;
    width: 30px;
  }

  .login-display-name { margin-right: 4px; }

  .configure-button {
    background: @login-buttons-config-color;
    border-color: @login-buttons-config-color-border;

    &:active, &:hover {
      background: @login-buttons-config-color-active;
      border-color: @login-buttons-config-color-active-border;
    }
  }

  .login-image {
    display: inline-block;
    position: absolute;
    left: 6px;
    top: 6px;
    width: 16px;
    height: 16px;
  }

  .text-besides-image {
    margin-left: 18px;
  }

  .no-services { color: red; }

  .login-link-and-dropdown-list {
    position: relative;
  }
  .login-close-text {
    float: left;
    position: relative;
    padding-bottom: 8px;
  }

  .login-text-and-button .loading, .login-link-and-dropdown-list .loading {
    display: inline-block;
  }
  &.login-buttons-dropdown-align-left #login-dropdown-list .loading {
    float: right;
  }
  &.login-buttons-dropdown-align-right #login-dropdown-list .loading {
    float: left;
  }

  .login-close-text-clear { clear: both; }

  .or { text-align: center; }
  .hline { text-decoration: line-through; color: lightgrey; }
  .or-text { font-weight: bold; }

  #signup-link { float: right; }
  #forgot-password-link { float: left; }
  #back-to-login-link { float: right; }
}

#login-buttons a, .accounts-dialog a {
    cursor: pointer;
    text-decoration: underline;
}

#login-buttons.login-buttons-dropdown-align-right .login-close-text {
    float: right;
}

@meteor-accounts-base-padding: 8px;
@meteor-accounts-dialog-border-width: 1px;

.accounts-dialog {
  border: @meteor-accounts-dialog-border-width solid #ccc;
  z-index: 1000;
  background: white;
  border-radius: 4px;

  padding: 8px 12px;
  margin: -8px -12px 0 -12px;

  width: @login-buttons-accounts-dialog-width;

  .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.2));

  // Labels and links inherit app's font with this line commented out:
  //font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #333;

  // XXX Make the dropdown and dialogs look good without a top-level
  // line-height: 1.6.  For now, we apply it to everything except
  // the "Close" link, which we want to have the same line-height
  // as the "Sign in" link.
  & > * { line-height: 1.6; }
  & > .login-close-text {
    line-height: inherit;
    font-size: inherit;
    font-family: inherit;
  }

  label, .title {
    display: inline;
    font-size: 80%;
    margin-top: 7px;
    margin-bottom: -2px;
  }
  input[type=text], input[type=email], input[type=password] {
    // Be pixel-accurate in IE 8+ regardless of our borders and
    // paddings, at the expense of IE 7.
    // Any heights or widths applied to this element will set the
    // size of the border box (including padding and borders)
    // instead of the content box.  This makes it possible to
    // do width 100%.
    .box-sizing-by-border();
    width: 100%;
    // A fix purely for the "meteor add bootstrap" experience.
    // Bootstrap sets "height: 20px" on form fields, which is too
    // small when applied to the border box.  People have complained
    // that Bootstrap takes this approach for the sake of IE 7:
    // https://github.com/twitter/bootstrap/issues/2935
    // Our work-around is to override Bootstrap's rule (with higher
    // precedence).
    &[type] { height: auto; }
  }

  .login-button-form-submit { margin-top: 8px; }
  .message { font-size: 80%; margin-top: 8px; line-height: 1.3; }
  .error-message { color: red; }
  .info-message { color: green; }
  .additional-link { font-size: 75%; }

  .accounts-close {
    position: absolute;
    top: 0;
    right: 5px;

    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none;
    color: #000;
    opacity: 0.4;

    &:hover {
      opacity: 0.8;
    }
  }

  #login-buttons-cancel-reset-password { float: right; }
  #login-buttons-cancel-enroll-account { float: right; }
}

#login-dropdown-list {
  position: absolute;
  // The top-left of the border-box of the dropdown is absolutely
  // positioned within its container, so we need to compensate
  // for the border.  The padding is already compensated for by
  // negative margins on the dropdown.
  // XXX We could use negative margins to compensate for the
  // border too.
  top: -@meteor-accounts-dialog-border-width;
  left: -@meteor-accounts-dialog-border-width;
}

#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list {
  left: auto;
  right: -@meteor-accounts-dialog-border-width;
}

#login-buttons-message-dialog .message {
    /* we intentionally want it bigger on this dialog since it's the only thing displayed */
    font-size: 100%;
}

.accounts-centered-dialog {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  z-index: 1001;
  position: fixed;

  left: 50%;
  margin-left: -(@login-buttons-accounts-dialog-width
               + @meteor-accounts-base-padding) / 2;

  top: 50%;
  margin-top: -40px; /* = approximately -height/2, though height can change */
}

@configure-login-service-dialog-width: 530px;

#configure-login-service-dialog {
  width: @configure-login-service-dialog-width;
  margin-left: -(@configure-login-service-dialog-width
               + @meteor-accounts-base-padding) / 2;
  margin-top: -220px; /* = approximately -height/2, though height can change */

  table { width: 100%; }
  input[type=text] {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
  }
  ol {
    margin-top: 10px;
    margin-bottom: 10px;

    li { margin-left: 30px; }
  }
  .configuration_labels { width: 30%; }
  .configuration_inputs { width: 70%; }
  .new-section { margin-top: 10px; }
  .url { font-family: "Courier New", Courier, monospace; }
}

#configure-login-service-dialog-save-configuration {
  float: right;
}

.configure-login-service-dismiss-button {
  float: left;
}

#just-verified-dismiss-button, #messages-dialog-dismiss-button {
  margin-top: 8px;
}

.hide-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  /* XXX consider replacing with DXImageTransform */
  background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */

  background-color: rgba(0, 0, 0, 0.7);
}

#login-buttons, .accounts-dialog {
  input[type=text], input[type=email], input[type=password] {
    padding: 4px;
    border: 1px solid #aaa;
    border-radius: 3px;
    line-height: 1;
  }
}

//////////////////// MIXINS

// Minimal, well-documented, general-purpose CSS mixins.
// (Some are same as Bootstrap.)

////////// Box-Sizing: Border-Box

// Setting `box-sizing: border-box` on an element causes the CSS
// layout algorithm to interpret `width` and `height` declarations
// as referring to the size of the border box (outside the border),
// not the content box as usual (inside the padding).
//
// This is especially useful for stretching a form element to the
// width of its container even if the form element has arbitrary
// padding and borders, which can be done using `width: 100%`.
//
// Browser support is IE 8+ and all modern browsers, with the caveat
// that `-moz-box-sizing` in Firefox is considered to have some
// buggy or non-compliant behavior.  For example, min/max-width/height
// may not interact correctly. See
// https://bugzilla.mozilla.org/show_bug.cgi?id=243412.
.box-sizing-by-border () {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

////////// Box-Shadow

.box-shadow (...) {
  box-shadow: @arguments;
  -webkit-box-shadow: @arguments; // For Android
}

////////// Unselectable

.unselectable () {
  -webkit-user-select: none; // Chrome/Safari
  -moz-user-select: none; // Firefox
  -ms-user-select: none; // IE10+

  // These delarations not implemented in browsers yet:
  -o-user-select: none;
  user-select: none;

  // In IE <= 9 and Opera, need unselectable="on" in the HTML.
}

//////////////////// LOGIN BUTTONS

@login-buttons-accounts-dialog-width: 250px;
@login-buttons-color: #596595;
@login-buttons-color-border: darken(@login-buttons-color, 10%);
@login-buttons-color-active: lighten(@login-buttons-color, 10%);
@login-buttons-color-active-border: darken(@login-buttons-color-active, 10%);

@login-buttons-config-color: darken(#f53, 10%);
@login-buttons-config-color-border: darken(@login-buttons-config-color, 10%);
@login-buttons-config-color-active: lighten(@login-buttons-config-color, 10%);
@login-buttons-config-color-active-border: darken(@login-buttons-config-color-active, 10%);

#login-buttons {

  display: inline-block;
  margin-right: 0.2px; // Fixes display on IE8: http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html

  // This seems to keep the height of the line from
  // being sensitive to the presence of the unicode down arrow,
  // which otherwise bumps the baseline down by 1px.
  line-height: 1;

  .login-button {
    position: relative; // so that we can position the image absolutely within the button
  }

  .login-buttons-with-only-one-button {
    display: inline-block;
    .login-button { display: inline-block; }
    .login-text-and-button {
      display: inline-block;
    }
  }

  .login-display-name {
    display: inline-block;
    padding-right: 2px;
    line-height: 1.5;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  .loading {
    line-height: 1;
    background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA);
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

#login-buttons .login-button, .accounts-dialog .login-button {
  cursor: pointer;
  .unselectable();
  padding: 4px 8px;

  font-size: 80%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;

  text-align: center;
  color: #fff;

  background: @login-buttons-color;
  border: 1px solid @login-buttons-color-border;

  border-radius: 4px;

  &:hover {
    background: @login-buttons-color-active;
  }
  &:active {
    background: @login-buttons-color-active;
    .box-shadow(0 2px 3px 0 rgba(0, 0, 0, 0.2) inset);
  }

  &.login-button-disabled, &.login-button-disabled:active {
    color: #ddd;
    background: #aaa;
    border: 1px solid lighten(#aaa, 10%);
    .box-shadow(none);
  }
}

// precendence of this selector is significant
.accounts-dialog * {
  // A base for our dialog CSS, to reset browser styles and protect against
  // the app's CSS.  Dialogs include the dropdown, config modals, and the
  // reset password modal.  We can't completely isolate the dialogs from
  // the app's CSS, and that isn't the goal because the app can style them.
  // This rule is a compromise that should take precedence over some very
  // broad rules but be overridden by more specific ones.

  // Add more declarations here if they help the dialogs look good
  // out-of-the-box in more apps.

  padding: 0;
  margin: 0;
  line-height: inherit;
  color: inherit;
  font: inherit;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.accounts-dialog .login-button {
  width: auto;
  margin-bottom: 4px;
}

#login-buttons {
  .login-buttons-padding {
    display: inline-block;
    width: 30px;
  }

  .login-display-name { margin-right: 4px; }

  .configure-button {
    background: @login-buttons-config-color;
    border-color: @login-buttons-config-color-border;

    &:active, &:hover {
      background: @login-buttons-config-color-active;
      border-color: @login-buttons-config-color-active-border;
    }
  }

  .login-image {
    display: inline-block;
    position: absolute;
    left: 6px;
    top: 6px;
    width: 16px;
    height: 16px;
  }

  .text-besides-image {
    margin-left: 18px;
  }

  .no-services { color: red; }

  .login-link-and-dropdown-list {
    position: relative;
  }
  .login-close-text {
    float: left;
    position: relative;
    padding-bottom: 8px;
  }

  .login-text-and-button .loading, .login-link-and-dropdown-list .loading {
    display: inline-block;
  }
  &.login-buttons-dropdown-align-left #login-dropdown-list .loading {
    float: right;
  }
  &.login-buttons-dropdown-align-right #login-dropdown-list .loading {
    float: left;
  }

  .login-close-text-clear { clear: both; }

  .or { text-align: center; }
  .hline { text-decoration: line-through; color: lightgrey; }
  .or-text { font-weight: bold; }

  #signup-link { float: right; }
  #forgot-password-link { float: left; }
  #back-to-login-link { float: right; }
}

#login-buttons a, .accounts-dialog a {
    cursor: pointer;
    text-decoration: underline;
}

#login-buttons.login-buttons-dropdown-align-right .login-close-text {
    float: right;
}

@meteor-accounts-base-padding: 8px;
@meteor-accounts-dialog-border-width: 1px;

.accounts-dialog {
  border: @meteor-accounts-dialog-border-width solid #ccc;
  z-index: 1000;
  background: white;
  border-radius: 4px;

  padding: 8px 12px;
  margin: -8px -12px 0 -12px;

  width: @login-buttons-accounts-dialog-width;

  .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.2));

  // Labels and links inherit app's font with this line commented out:
  //font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #333;

  // XXX Make the dropdown and dialogs look good without a top-level
  // line-height: 1.6.  For now, we apply it to everything except
  // the "Close" link, which we want to have the same line-height
  // as the "Sign in" link.
  & > * { line-height: 1.6; }
  & > .login-close-text {
    line-height: inherit;
    font-size: inherit;
    font-family: inherit;
  }

  label, .title {
    font-size: 80%;
    margin-top: 7px;
    margin-bottom: -2px;
  }
  input[type=text], input[type=email], input[type=password] {
    // Be pixel-accurate in IE 8+ regardless of our borders and
    // paddings, at the expense of IE 7.
    // Any heights or widths applied to this element will set the
    // size of the border box (including padding and borders)
    // instead of the content box.  This makes it possible to
    // do width 100%.
    .box-sizing-by-border();
    width: 100%;
    // A fix purely for the "meteor add bootstrap" experience.
    // Bootstrap sets "height: 20px" on form fields, which is too
    // small when applied to the border box.  People have complained
    // that Bootstrap takes this approach for the sake of IE 7:
    // https://github.com/twitter/bootstrap/issues/2935
    // Our work-around is to override Bootstrap's rule (with higher
    // precedence).
    &[type] { height: auto; }
  }

  .login-button-form-submit { margin-top: 8px; }
  .message { font-size: 80%; margin-top: 8px; line-height: 1.3; }
  .error-message { color: red; }
  .info-message { color: green; }
  .additional-link { font-size: 75%; }

  .accounts-close {
    position: absolute;
    top: 0;
    right: 5px;

    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none;
    color: #000;
    opacity: 0.4;

    &:hover {
      opacity: 0.8;
    }
  }

  #login-buttons-cancel-reset-password { float: right; }
  #login-buttons-cancel-enroll-account { float: right; }
}

#login-dropdown-list {
  position: absolute;
  // The top-left of the border-box of the dropdown is absolutely
  // positioned within its container, so we need to compensate
  // for the border.  The padding is already compensated for by
  // negative margins on the dropdown.
  // XXX We could use negative margins to compensate for the
  // border too.
  top: -@meteor-accounts-dialog-border-width;
  left: -@meteor-accounts-dialog-border-width;
}

#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list {
  left: auto;
  right: -@meteor-accounts-dialog-border-width;
}

#login-buttons-message-dialog .message {
    /* we intentionally want it bigger on this dialog since it's the only thing displayed */
    font-size: 100%;
}

.accounts-centered-dialog {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  z-index: 1001;
  position: fixed;

  left: 50%;
  margin-left: -(@login-buttons-accounts-dialog-width
               + @meteor-accounts-base-padding) / 2;

  top: 50%;
  margin-top: -40px; /* = approximately -height/2, though height can change */
}

@configure-login-service-dialog-width: 530px;

#configure-login-service-dialog {
  width: @configure-login-service-dialog-width;
  margin-left: -(@configure-login-service-dialog-width
               + @meteor-accounts-base-padding) / 2;
  margin-top: -220px; /* = approximately -height/2, though height can change */

  table { width: 100%; }
  input[type=text] {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
  }
  ol {
    margin-top: 10px;
    margin-bottom: 10px;

    li { margin-left: 30px; }
  }
  .configuration_labels { width: 30%; }
  .configuration_inputs { width: 70%; }
  .new-section { margin-top: 10px; }
  .url { font-family: "Courier New", Courier, monospace; }
}

#configure-login-service-dialog-save-configuration {
  float: right;
}

.configure-login-service-dismiss-button {
  float: left;
}

#just-verified-dismiss-button, #messages-dialog-dismiss-button {
  margin-top: 8px;
}

.hide-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  /* XXX consider replacing with DXImageTransform */
  background-color: rgb(0.2, 0.2, 0.2); /* fallback for IE7-8 */

  background-color: rgba(0, 0, 0, 0.7);
}

#login-buttons, .accounts-dialog {
  input[type=text], input[type=email], input[type=password] {
    padding: 4px;
    border: 1px solid #aaa;
    border-radius: 3px;
    line-height: 1;
  }
}


Move the OAuth configuration wizard up.

Move the OAuth configuration wizard up.

Some of them are getting pretty high, and it was lower than
center on my 13" laptop.

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/yalexx/meteor.git/'


Changing background gradient to blue, altering nav 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/edj-boston/ericjohnson-me.git/'


[清空购物车活动]调整样式

[清空购物车活动]调整样式

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/psychokiller666/heishi.git/'


[FEATURE] sap.ui.documentation: new sap_horizon theme

Change-Id: Idf3047ebb896f06db5e75e0dd60ddce7f766d443

/*!
 * ${copyright}
 */

@import "../base/library.source.less";
@import "../../../../../sap/ui/core/themes/sap_horizon/base.less";
@import "../../../../../sap/ui/core/themes/sap_horizon/global.less";

error: pathspec 'src/sap.ui.documentation/src/sap/ui/documentation/themes/sap_horizon/library.source.less' did not match any file(s) known to git